1

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

下面是代码:

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

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

4

2 回答 2

5

这应该可行,但取决于外部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-childnot伪选择器一起使用:

const StyledSelect = styled(Select)`
  &&& li:not(:first-child) {
    margin-left: 20px;
  }
`
于 2017-06-27T07:54:51.473 回答
1

您可以使用 CSS 伪类:

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

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

于 2017-06-27T08:05:33.233 回答