styled-components:主题中的样式覆盖组件样式 [英] styled-components: style in theme is overriding component style

问题描述

复制

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

Expected: palevioletred color of Title, and red of TitleWithoutColor (theme styles triggered)

得到:到处都是红色

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

Why: The rule that leads to this is like: p.column { text-align: right; } can be overwritten by body p.column { text-align: left; }, cause it more specific

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

Question: how to write themes so that styles of components would have bigger priority?

推荐答案

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

Ok, I think I found solution, problem was that

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

样式组件的正确用法，相反我必须定义组件并扩展它们

isnt right usage of styled-components, instead I have to define components and extend them

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

这篇关于styled-components:主题中的样式覆盖组件样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！