styled-components: parent styles has more priority then child

问题

image

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

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

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?

回答1:

The problem was that

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

来源：https://stackoverflow.com/questions/45610529/styled-components-parent-styles-has-more-priority-then-child