CODEWITHSUNDEEP
cssreactjsstyled-components
Milk
Milk

Reputation: 2655

React Styled-Components CSS add !important to child elements

I have a component that I would like to style with !important on some of the child elements.

Is it possible to use &&& to achieve this?

I've tried the following but it does not work:

const StyledTitle = styled(Title)`
  &&& span {
      text-align: center;
      font-weight: bold;
  }
  span &&& {
      text-align: center;
      font-weight: bold;
  }
`

Upvotes: 0

Views: 1168

Answers (1)

andy mccullough
andy mccullough

Reputation: 9591

If there are inline styles you are trying to override you will need to just add !important. It boils down to CSS specificity - https://www.w3schools.com/css/css_specificity.asp

Inline styles have a high specificity score and are very difficult to override without using !important

The multiple & in styles components is used to raise the specificity but you'd have to abuse this in order to overrule the inline styles.

Upvotes: 1

Related Questions