样式组件默认使用 !important?

Question

我用 styled-component 包装了现有组件，但我发现必须声明!important覆盖该组件的现有样式很烦人，例如

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

很难看出哪个属性必须使用重要，我在保存文件后通过视觉变化检测到它，这太烦人了，有什么解决方案？

Answer 1

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