样式组件：父样式比子样式具有更高的优先级

Question

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

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

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

它的正确行为，但不是我期望的那样，如何使注销按钮的优先级更大？

Answer 1

问题是

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

样式组件：父样式比子样式具有更高的优先级

styled-components: parent styles has more priority then child

css

reactjs

styled-components