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

Question

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

下面是代码：

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

知道为什么这不起作用或另一种方法吗？

score 5 · Accepted Answer

这应该可行，但取决于外部Select应用样式的方式，它们可能具有更高的特异性，并且仍然覆盖您应用的样式。（有关特异性如何工作的入门知识，请参阅本文）

在不知道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;
  }
`

score 1 · Accepted Answer

您可以使用 CSS 伪类：

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

2 回答 2