Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

724
Views
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?

over 4 years ago · Santiago Trujillo
2 answers
Answer question

0

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

over 4 years ago · Santiago Trujillo Report

0

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

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!