样式组件:父样式比子样式具有更高的优先级 [英] styled-components: parent styles has more priority then child

问题描述

图片

export const LogOutButton = styled.button`
  display: inline-block;
  ....
`;
export default styled(ThemedApp)`
  ....
  button {
    ....
    display: flex;
    ....
  }
`;

如你所见，Logout button(有 gBuhXv 类)有 display: flex，而不是 inline-block，因为 parent(ThemedApp, .jCe...) 的优先级更大

as you see, Logout button(has class gBuhXv) has display: flex, instead of inline-block, because priority of parent(ThemedApp, .jCe...) is bigger

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

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

这是正确的行为，但不是我所期望的，如何使注销按钮的优先级更大?

Its right behavior, but not that I expect, how to make priority of Logout button bigger?

推荐答案

问题在于

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

不是样式组件的正确用法.

isn't the 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;
`

这篇关于样式组件:父样式比子样式具有更高的优先级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！