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

Question

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

The styled-component

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

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

Answer 1

您可以使用吸引人设置道具值。

这是一个可链接的方法，它将一些道具附加到一个样式组件上。第一个也是唯一的参数是一个对象，它将被合并到组件的其他支柱中。

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