我有一个外部Select
反应组件,它反过来渲染li
标签。我想用20pxli
设置除第一个之外的所有样式;margin-left
下面是代码:
const StyledSelect = styled(Select)`
li {
margin-left: 20px;
}
`
知道为什么这不起作用或另一种方法吗?
我有一个外部Select
反应组件,它反过来渲染li
标签。我想用20pxli
设置除第一个之外的所有样式;margin-left
下面是代码:
const StyledSelect = styled(Select)`
li {
margin-left: 20px;
}
`
知道为什么这不起作用或另一种方法吗?
这应该可行,但取决于外部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;
}
`
您可以使用 CSS 伪类:
const StyledSelect = styled(Select)`
li:not(:first-child) {
margin-left: 20px;
}
`
阅读更多关于 CSS 伪类的信息:https ://developer.mozilla.org/en/docs/Web/CSS/Pseudo-classes