Search code examples
cssreactjsstyled-components

styled-component by default use !important?

I wrap existing component with styled-component but I find it annoying to have to declare !important to overwrite the existing style of that component, for example

import { Row, Col, Card, Typography } from 'antd'
const { Title } = Typography

const StyledTitle = styled(Title)`
  text-align: center;
  margin: 50px 0 20px 0 !important;
  font-weight: normal !important;
`

It's hard to see which property have to use important, I detect it via visual changes after I save the file, which is so annoying, what's the solution to this?

Solution

  • They recommend adding ampersands

    const StyledTitle = styled(Title)`
  &&& {
      text-align: center;
      margin: 50px 0 20px 0;
      font-weight: normal;
  }
`

    https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity