0

图片

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

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

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

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

4

1 回答 1

-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;
`
于 2017-08-11T16:00:32.947 回答