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

【问题标题】：How to access inner elements of external components如何访问外部组件的内部元素
【发布时间】：2017-11-29 20:30:20
【问题描述】：

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

下面是代码：

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

知道为什么这不起作用或其他方法吗？

【问题讨论】：

【解决方案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 在这里所做的是将每个 & 替换为生成的类，这意味着生成的 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;
  }
`

【讨论】：

建议 hack 或使用特殊性并不是指出某人的好方向，恕我直言。
如果外部组件使用内联样式，我假设是这种情况，否则样式将被覆盖，如果不给它们比内联样式更高的特异性，就无法应用您的样式，而唯一的办法就是使用hacks。让我更新我的答案，解释为什么我认为这是必要的，一秒钟！
我已经更新了答案以反映我的假设（外部组件使用内联样式）并解释了为什么需要 hack，但如果不是绝对必要，也不应该使用它们。现在我的回答对你来说更有意义了吗？
绝对！ :-)
虽然我的问题有所不同，但我会将其标记为答案，以便给我一些知识:)。我面临的问题是，在单击 Select 组件时，它会打开一个具有 li 标签的 popover 组件。我想覆盖那个 li 标签，但我不确定这是不是更好的方法。

【解决方案2】：

你可以使用 CSS 伪类：

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

【讨论】：