css - 使用 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 一起工作。我们将样式化组件转换为 object 并使用& ::selection. 我没有尝试过空间，就是这样！

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