Styled-components and react-bootstrap?

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?

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

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