Styled-components and react-bootstrap?

Question

Is there a way to use styled-components together with react-bootstrap? react-bootstrap exposes bsClassproperties instead of className for their component which seems to be incompatible with styled-components.

Any experiences?

Answer 1

You can extend the style keeping the original styles of the component from bootstrap. You will find more documentation on using third party libraries like react bootstrap with styled-components here.

const StyledButton = styled(Button)`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

Here is a sandbox for reference: https://codesandbox.io/s/2vpm40qk90

Answer 2

I'd like to offer a better alternative and approach.

I have been using react-bootstrap before and we have found that the current implementation was not porting bootstrap into react entirely and we still needed to rely on external files such as CSS/Fonts which is not styled-components philosophy and best practice.

Considering styled-components offer the css interface, we ported bootstrap 4 with best ES6 practices in a project called bootstrap-styled.

This Twitter Bootstrap v4 implementation of bootstrap is fully implemented for styled-components without a once of CSS or extra files.

This gives several benefits starting with a full js api, theming, modularity and reusability.

To override styles, it can be done through the <ThemeProvider /> or using props.theme on any component. We also export a <BootstrapProvider /> component that include <ThemeProvider /> and provide bootstrap class utilities such as .d-none, etc... in it's scope.

You can see a demo here