我有一个外部Select反应组件，它依次渲染li标签。我想li用margin-left20px 设置除第一个之外的所有样式；
下面是代码：
const StyledSelect = styled(Select)`
li {
margin-left: 20px;
}
`
知道为什么这不起作用或以其他方式执行此操作吗？
这应该可以工作，但取决于外部如何Select应用样式，它们可能具有更高的特异性并且仍然覆盖您应用的样式。（有关特异性如何工作的入门，请参阅本文）
在不知道Select您使用的是哪个组件的情况下，调试起来有点困难，但我假设它使用style具有非常高特异性的内联样式（即prop），因此会覆盖您应用的样式。
有两种方法可以提高样式的特异性，如果外部组件不使用内联样式，则不推荐使用这两种方法。
提高特异性的第一种方法是使用!important：
const StyledSelect = styled(Select)`
li {
margin-left: 20px!important;
}
`
在某些情况下，这可能还不够，而且一旦您有更多需要强行覆盖的属性，这也很乏味。一个更好的方法，但仍然不推荐的方法是使用类黑客：（注意＆符号）
const StyledSelect = styled(Select)`
&&& li {
margin-left: 20px;
}
`
这里styled-components所做的是用&生成的类替换这些中的每一个，这意味着生成的 CSS 将如下所示：
.sc-asdf123.sc-asdf123.sc-asdf123 li {
margin-left: 20px;
}
这三个类极大地影响了块内样式的特异性。这应该够了吧！
要不设置第一个孩子的样式，您可以将first-child与not伪选择器一起使用：
const StyledSelect = styled(Select)`
&&& li:not(:first-child) {
margin-left: 20px;
}
`
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句