Problems Importing Bootstrap Studio Renders into React with reactstrap

Question

I'm working on a project where the designer is working with BootStrap studio, which exports to html with BootStrap 4, and I'm converting the exported file into React components with reactstrap.

I'm facing problems with class and styling rules, since the original file inherit from 7 different files. What's the best way to convert something like:

         <div id="nav-bars">
        <nav class="navbar navbar-light navbar-expand-md" id="top-nav" style="background-color:rgba(0,0,0,0.5);color:rgb(255,255,255);">
            <div class="container-fluid"><a class="navbar-brand" href="#" style="background-image:url(&quot;assets/img/logoalt copy.png&quot;);padding-right:5px;background-size:contain;margin-right:0;padding-left:5px;background-position:center;">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</a>

into react components while preserving the css rules?

I'm having troubles understanding the actual problem. jsx provides the className and style prop to set class names and inline styles on elements. But what is the benefit of creating react components from static markup? — trixn
– trixn, Commented Apr 11, 2018 at 22:20

Gergely M · Accepted Answer · 2019-10-16 13:27:01Z

1

JSX requires that you className= not class=

See: https://reactjs.org/docs/faq-styling.html

edited Oct 16, 2019 at 13:27

Gergely M

7636 silver badges16 bronze badges

answered Jul 1, 2018 at 9:51

James

1,2932 gold badges12 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Problems Importing Bootstrap Studio Renders into React with reactstrap

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related