css - 如何使用带样式组件的默认 Bootstrap 类？

Question

我想在 styled-component 的样式中使用 Bootstrap 的 display-4 类。

styled-component:

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

我应该将 display-4 Bootstrap 类放在 styled-component 中的什么位置。我知道每次使用 Heading 组件时我都可以执行 className='display-4'，但肯定有更好的方法吗？

Answer 1

您可以使用 attrs设置 Prop 值。

This is a chainable method that attaches some props to a styledcomponent. The first and only argument is an object that will bemerged into the rest of the component's props.

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