Search code examples
cssreactjsstylusemotion

How to change color of text when selected with Emotion library

I am trying to convert a css code from Stylus to Emotion. In Stylus as with CSS, you can add the pseudo element ::selection to change the color when the text is selected.

// Stylus
#adventure
  max-width: 1400px
    ::selection
      color: $adventure-background

I tried this syntax but it does not seem to make it work

// Emotion
export const Adventure = styled.div`
  max-width: 1400px;
  /* @TODO not working */
  &::selection {
    color: ${colors.greenWater};
  }
`;

If someone has a clue! Thanks for your help!

Solution

  • So we finally found how to make css ::selection work with Emotion. We converted our styled component to object and uses & ::selection. I did not tried with space and it was that!

    // Emotion
export const Adventure = styled.div({
  maxWidth: '1400px',
  /* working now! */
  '& ::selection': {
    color: colors.greenWater,
  },
});