Как использовать класс по умолчанию bootstrap со стилизованными компонентами?

Question

Я хочу использовать класс bootstrap display-4 в стиле styled-component.

styled-component:

const Heading = styled.h2`
        font-weight: bold,
        color: #968c8c,
`;

Где мне поместить display-4 bootstrap класс в styled-component. Я знаю, что могу делать className='display-4' каждый раз, когда использую компонент Heading, но разве есть способ лучше?

Answer 1

Вы можете использовать attrs для установки значений свойств.

Это метод с цепочкой, который прикрепляет некоторые свойства к стилизованному компоненту. Первый и единственный аргумент - это объект, который будет объединен с остальными свойствами компонента.

const Heading = styled.h2.attrs(() => ({
  className: 'display-4',
}))`
  font-weight: bold,
  color: #968c8c,
`;