Question

我有一个外部Select反应组件，它反过来呈现li个标签。除了第一个li为20px之外，我想要设置所有margin-left的样式;

以下是代码：

const StyledSelect = styled(Select)`
  li {
    margin-left: 20px;
  }
`

知道为什么这不起作用或以其他方式做到这一点？

Answer 1

这应该可行，但是根据外部Select如何应用样式，它们可能具有更高的特异性，并且仍然覆盖您应用的样式。（参见this article了解特异性的工作原理）

不知道您使用哪个Select组件有点难以调试，但我假设它使用内联样式（即style道具）具有非常高的特异性，因此会覆盖您应用的样式。

有两种方法可以提高样式的特异性，如果外部组件不使用内联样式，这两种方法都不推荐。

提高特异性的第一种方法是使用!important：

const StyledSelect = styled(Select)` li { margin-left: 20px!important; } `

在某些情况下可能还不够，而且一旦你拥有更多属性，你需要强行覆盖，这也是相当繁琐的。一个更好的方法，但仍然不推荐的方式是使用类hack :(注意＆符号）

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; } `

Answer 2

您可以使用CSS伪类：

const StyledSelect = styled(Select)`
  li:not(:first-child) {
    margin-left: 20px;
  }
`

阅读有关CSS伪类的更多信息：https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-classes

如何访问外部组件的内部元素

2 个答案: