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

Question

我想将一个CSS代码从Stylus转换为Emotion。在Stylus和CSS一样，您可以添加伪元素::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,
  },
});