Styled-components and react-bootstrap?
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