如何在Styled Components中正确实现Emotion属性选择器语法？

你原来的代码存在两处问题：

1. 对象语法里的属性选择器写法错误——既没使用&指代当前组件，键的格式也不符合JS对象规则
2. 属性名大小写不匹配（Emotion中是data-isOn，你写的是data-ison）

下面是两种可行的正确实现方式：

方式一：对象语法 #

const Switch = styled('div')({
  cursor: 'pointer',
  // 用&指代当前组件，将完整选择器作为字符串键
  ['&[data-isOn="true"]']: {
    justifyContent: 'flex-end',
  },
});

方式二：模板字符串语法（更常用直观） #

const Switch = styled.div`
  cursor: pointer;

  &[data-isOn="true"] {
    justify-content: flex-end;
  }
`;

使用组件时，记得添加对应属性：

<Switch data-isOn={true}>...</Switch>

注意：组件上的属性名必须和选择器里的完全一致（包括大小写），否则无法匹配生效。

内容的提问来源于stack exchange，提问作者sir-haver