How to use default bootstrap class with styled-components?

user_13807248 0
Viewed 1780

I want to use bootstrap's display-4 class within the styling of a styled-component.

The styled-component:

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

Where do I put the display-4 bootstrap class in the styled-component. I know I could do className='display-4' every time I use the Heading component, but surely there's a better way?

bootstrap-4 styled-components reactjs css
1 Answers

You can use the attrs to set prop values.

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

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