在styled-components中如何基于details的open属性设置summary样式

问题原因 #

你写的样式没有生效是因为缺少了&占位符：原写法里的[open] > summary会被styled-components解析为匹配当前details组件的后代中带有open属性的元素的子summary标签，而非匹配自身带有open属性的当前details组件。

解决方案 #

在[open]前添加&即可，&在styled-components中永远指向当前声明样式的组件本身，修改后代码如下：

const Details = styled.details`
  &[open] > summary {
    color: white;
    background: tomato;
  }
`;

修改后生成的CSS就和你预期的details[open] > summary效果完全一致。

内容的提问来源于stack exchange，提问作者Cuado