styled-component by default use !important?

Viewed 5166

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?

1 Answers
Related