如何使用带有样式组件的默认引导类？

Question

我想在 styled-component 的样式中使用引导程序的 display-4 类。

styled-component:

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

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

Answer 1

您可以使用attrs 来设置属性值。

这是一种可链接的方法，将一些道具附加到样式 零件。第一个也是唯一的参数是一个对象 合并到组件的其余部分中。

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