'React Boot Strap with React Styled Components

I'm currently porting an old MVC website with Razor pages. I now want to use react with style compoents.

Now I am using react on the front end, I want to know what the best way to use the two things together.

For example how do I convert the classes on this div to use style components.

<div class="col-sm-6 col-md-4">

Do I just copy the bootstrap properties for those classes like this?

export const myDiv = styled.div`
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    flex: 0 0 33.33333%;
    max-width: 33.33333%;`

Or is there a way to do something more like this:

export const myDiv = styled.div`
    CLASS NAMES FROM BOOTSTRAP HERE: col-sm-6 col-md-4`

This is the first time using styled components so I'm not sure if this approach is anything like it should be.

Any ideas and explainations please?

Solution 1:^[1]

I suggest using some libraries like react-bootstrap and using its components. Other method (don't like it) is to import Bootstrap minified classes in html and use them inside components.

Then if you have to customize more or add styles that doesn't exists in Boostrap you can use Styled Components.

Copying the Bootstrap properties is long, potentially buggy and you lost the versioning of it.

Solution 2:^[2]

If you want to start using react with styled-components which is a very good choice and you want to also include bootstrap I would recommend bootstrap-styled and also check out cssAPI from styled-components to create reusable css that you can inject in your components

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Nick Wood
Solution 2	Alain Plana

'React Boot Strap with React Styled Components

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]