样式化组件:主题中的样式覆盖组件样式

Question

复制

预期：标题palevioletred颜色，标题无颜色颜色红色(触发主题样式(

得到：到处都是红色

原因：导致这种情况的规则是这样的：p.column { text-align: right; }可以被body p.column { text-align: left; }覆盖，使其更具体

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

Answer 1

Reactjs

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

CSS

#random_component {
color: #0000 !important ;
}

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

Answer 2

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

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;
`