styled components using global ::selection pseudo element

user_12842397 0
Viewed 12

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;
  }
}
styled-components reactjs
1 Answers

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