问题
Is there a way to use styled-components together with react-bootstrap? react-bootstrap exposes bsClass
properties instead of className
for their component which seems to be incompatible with styled-components.
Any experiences?
回答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
回答2:
I'd like to offer a better alternative.
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
来源:https://stackoverflow.com/questions/45895416/styled-components-and-react-bootstrap