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

Question

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

代码如下：

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

在某些情况下，这可能还不够，而且一旦您拥有更多需要强行覆盖的属性，这也非常乏味。一种更好的方法，但仍然不推荐使用 class hack：（注意＆符号）

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

这里 styled-components 所做的是用生成的 class 替换每个 &，这意味着生成的 CSS 看起来像这样：

.sc-asdf123.sc-asdf123.sc-asdf123 li {
  margin-left: 20px;
}

这三个 classes 极大地提高了块内样式的特殊性。这应该可以解决问题！[=23=]

要不设置第一个子项的样式，您可以将 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;
  }
`

How to access inner elements of external components