styled-components: style in theme is overriding component style [duplicate]

问题

Reproduction

Expected: palevioletred color of Title, and red of TitleWithoutColor (theme styles triggered)

Got: red everywhere

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

Question: how to write themes so that styles of components would have bigger priority?

回答1:

Reactjs

<div id = "random_component"></div>

Css

#random_component {
    color: #0000 !important ;
}

Sometimes reactjs styling is not recognized as more specific than the framework you may be using. This comes from the fact that most frameworks have their styling coded in Css. To fix this, use Css to override current framework by defining a className or an id. Also, you can add the "!important" command to make sure all other level of specificity are overruled.

回答2:

Ok, I think I found solution, problem was that

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

isnt 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/45628743/styled-components-style-in-theme-is-overriding-component-style

标签

css

reactjs

styled-components