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

Question

我有一个外部Select反应组件,反过来渲染li标签.我想要li除了第一个margin-left20px 以外的所有样式;

以下是代码:

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

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

Answer 1

这应该有效,但是根据外部Select应用样式的方式,它们可能具有更高的特异性,并且仍然覆盖您应用的样式.(有关特异性如何工作的入门知识,请参阅此文章)

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