0

再生产

预期:palevioletredTitle 的颜色,TitleWithoutColor 的红色(主题样式触发)

得到:到处都是红色

为什么:导致这种情况的规则是:p.column { text-align: right; }可以被覆盖body p.column { text-align: left; },导致它更具体

问题:如何编写主题以使组件的样式具有更大的优先级?

4

2 回答 2

0

反应

<div id = "random_component"></div>

CSS

#random_component {
    color: #0000 !important ;
}

有时 reactjs 样式不被认为比您可能使用的框架更具体。这是因为大多数框架的样式都是用 Css 编码的。className要解决此问题,请使用 Css 通过定义 a或a 来覆盖当前框架id。此外,您可以添加“ !important”命令以确保所有其他级别的特异性都被否决。

于 2017-08-11T07:03:08.477 回答
0

好的,我想我找到了解决方案,问题是

const globalStyles = styled.div`
p {
  color: ${props => props.theme.somecolor};
}
a {
  color: ${props => props.theme.somecolor};
}`

样式组件的使用不正确,而是我必须定义组件并扩展它们

const P = styled.p`
  color: ${props => props.theme.somecolor};
`
const A = styled.A`
  color: ${props => props.theme.somecolor};
`
const CustomA = A.extend`
  color: mycolor;
`
于 2017-08-11T08:43:46.003 回答