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 compone

Answer 1

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 or using props.theme on any component. We also export a component that include and provide bootstrap class utilities such as .d-none, etc... in it's scope.

You can see a demo here