компонент по умолчанию используется по умолчанию!

Question

Я обертываю существующий компонент стилевым компонентом, но меня раздражает необходимость объявлять !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

Они рекомендуют добавлять амперсанды

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-высокая специфичность