styled-components:主题中的样式覆盖组件样式

styled-components: style in theme is overriding component style

Reproduction

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

得到:到处都是红色

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

问题:如何写主题,让组件的样式有更高的优先级?

Reactjs

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

Css

#random_component {
    color: #0000 !important ;
}

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

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

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

styled-components 的用法不正确,我必须定义组件并扩展它们

const P = styled.p`
  color: ${props => props.theme.somecolor};
`
const A = styled.A`
  color: ${props => props.theme.somecolor};
`
const CustomA = A.extend`
  color: mycolor;
`