57

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?

jpfollenius
  • 16,456
  • 10
  • 90
  • 156

2 Answers2

82

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

Agney
  • 18,522
  • 7
  • 57
  • 75
  • 7
    This is the correct way to go! As a sidenote, this will work with any third-party or external component that accepts the `className` prop to be passed in. – mxstbr Aug 26 '17 at 14:50
  • If you want to style a child of one of these components you can do so like this... `styled(Carousel)\` border: 2px solid red; & .carousel-control { background-image: none; } \`;` – Dylan Maxey Jul 31 '19 at 07:29
  • I might be mistaken, but I don't think the syntax for border in this answer is correct. You have to customize each feature of the BORDER when using styled components. And same goes for any css property that can accept multiple input customizations. - again, I might be mistaken. – Goku Oct 20 '20 at 05:32
  • @Goku Can you elaborate on what you mean by `each feature of border` ? Any valid CSS will be valid inside the styled components – Agney Oct 21 '20 at 13:57
  • @Agney. I'll try my best, friend. So. I'm not sure if it's syntactically accepted to write: const StyledButton = styled(Button) ` ... border: 2px solid palevioletred; ... `; Instead, I think it's suppose to be written like this to be recognized by current compiler: const StyledButton = styled(Button) ` ... border-width: 2px; border-color: palevioletred; ... `; This is in regards to styled-components only. For regular CSS it does work for sure. – Goku Oct 22 '20 at 01:20
  • @Goku Not sure what you are referring to. Any valid `border` syntax works in `styled-components` as well. In fact, this border syntax is shown off on the demo on styled components homepage – Agney Oct 22 '20 at 13:17
  • My mistake then. I think I over trusted YouTube thats all haha. – Goku Oct 23 '20 at 05:48
23

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

Dimitri Kopriwa
  • 13,139
  • 27
  • 98
  • 204
  • 2
    I am trying to figure out how to combine react-bootstrap as well. It is cool, but once you get tired of keeping bootstrap-styled up to date, it will become deprecated..? – Capuchin Oct 22 '19 at 12:00
  • 1
    You don't need react-bootstrap. It is up to date. We up date it using community help. Everyone can contribute. There are no known bugs in Bootstrap Styled and no known change in Bootstrap 4, so there's no reason to change the source code beside upgrading react and styled version. We are still actively contributing and often contributors extend features using PR. – Dimitri Kopriwa Oct 23 '19 at 13:08
  • Can we extend bootstrap styles using this? – Casey Dec 27 '19 at 00:37
  • What do you mean @Casey ? Do you have a use case ? There isn't limitation with bootstrap-styled, styled and css. And all the mixins are open source so they can be used as it is and extend the js api. For all css, it use theme variables and you can as much as you want. Any component can be wrapped with default value or more css. – Dimitri Kopriwa Dec 27 '19 at 01:19
  • @DimitriKopriwa I'm thinking of creating a styled-component which I currently apply className="text-center" prop, but I'd like to change it to say I'm including it in the styled component definition. Something like `styled(text-center)` font-color: #abc123;` – Casey Dec 27 '19 at 22:36
  • Can you reword your question I am not understanding what you are clearly asking for? – Dimitri Kopriwa Dec 27 '19 at 23:02
  • Looking at their github it doesn't seem to be too too alive at the moment with latest, very minor commits 8 months ago. Are there any alternatives? – Igor Loskutov Dec 31 '20 at 07:52
  • @Igor, v4 is not moving a lot so as our library, we are only doing major dependencies update since it is done. If you want to implement new features, we do it in new projects to extend the eco system. This project only accept bug fix or improvement this is why we do not have new commits. PR are still reviewed. I do not know about an alternative. – Dimitri Kopriwa Dec 31 '20 at 09:08