使用global ::选择伪元素样式组件

发布于 2025-02-02 04:37:08 字数 494 浏览 0 评论 0原文

我正在尝试将全局样式表应用于我的React项目，这将从默认的蓝色中更改突出显示的颜色。

但是，我不知道如何使用::选择伪元与样式组件。

const GlobalStyle = createGlobalStyle`
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;700&display=swap');

* {
  /* border: 1px solid blue; */
}

html {
  font-size: 62.5%; // sets 1rem = 10px
  padding: 0;
  margin: 0;

  &::selection,
  &::-moz-selection {
    color: red;
    background-color: yellow;
  }
}

原文

I'm trying to apply a global stylesheet to my React project, which will change the highlight color from the default blue.

However, I can't figure out how to use the ::selection pseudoelement with styled components.

const GlobalStyle = createGlobalStyle`
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;700&display=swap');

* {
  /* border: 1px solid blue; */
}

html {
  font-size: 62.5%; // sets 1rem = 10px
  padding: 0;
  margin: 0;

  &::selection,
  &::-moz-selection {
    color: red;
    background-color: yellow;
  }
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

纵性 2025-02-09 04:37:08

弄清楚了，::选择假应该在根级别

const GlobalStyle = createGlobalStyle`
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;700&display=swap');

* {
  /* border: 1px solid blue; */
}

html {
  font-size: 62.5%; // sets 1rem = 10px
  padding: 0;
  margin: 0;
}

::selection, {
  color: red;
  background-color: yellow;
}

Figured it out, the ::selection pseudoelement should be at the root level

const GlobalStyle = createGlobalStyle`
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;700&display=swap');

* {
  /* border: 1px solid blue; */
}

html {
  font-size: 62.5%; // sets 1rem = 10px
  padding: 0;
  margin: 0;
}

::selection, {
  color: red;
  background-color: yellow;
}

回复收藏 0 原文

~没有更多了~