如何将默认引导程序类与样式化组件一起使用

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

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

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

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