Question

image

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

如您所见，Logout button（包含类gBuhXv）有display: flex而不是inline-block，因为父级的优先级（ThemedApp，{{1 }}）更大

导致此问题的规则.jCe...可由p.column { text-align: right; }覆盖，因此更具体

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

Answer 1

问题在于

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

styled-components：父样式比child更优先

1 个答案: