使用Emotion库选择时如何更改文本的颜色

Question

我正在尝试将CS​​S代码从手写笔转换为Emotion。 与CSS一样，在Stylus中，您可以添加伪元素::selection以在选择文本时更改color。

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

我尝试了这种语法，但是它似乎无法正常工作

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

如果有人有线索！感谢您的帮助！

Answer 1

因此，我们终于找到了如何使css ::selection与Emotion一起工作。我们将样式化的组件转换为对象，并使用& ::selection。我没有尝试过空间，就是那样！

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