React Boot Strap with React Styled Components

user_2537315 0
Viewed 124

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?

react-bootstrap styled-components reactjs
2 Answers

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.

user_116961060

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

user_102219830
Related