样式组件使用global::selection伪元素

Question

我正在尝试将全局样式表应用到我的React项目中，这将改变默认的蓝色高亮颜色。

但是，我不知道如何在样式组件中使用::selection伪元素。

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;
}
}

Answer 1

明白了，::selection伪元素应该位于根级别

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;
}