How to Import CSS Module React and JSX? ( Error )

Question

IN my react application I want to locally style on of my components.
For that I'm using the yourCSS.module.css convention.

In myComponent.jsx I then import that CSS-Module:

import React, { Component } from 'react';
import styles from './startPage.module.css' //loading the css moduleenter code here

class StartPage extends Component {
    state = {  }
    render() { 
        return ( 
           <div className="container">
               <div className="row">    {/*Row 1 - contains title*/} 
                    <div style className="col-md-6 offset-md-3">
                        <p styles={styles.boilerplate}>some boilterplate text</p>
                    </div>
               </div>

               <div className="row">    {/*Row 2 - contains buttons*/} 

               </div>
           </div> 
         );
    }
}

export default StartPage;

React then throws the following error in my browser:

Error: The `style` prop expects a mapping from style properties to values, not a string.
For example, style={{marginRight: spacing + 'em'}} when using JSX.

My css currently contains

.boilerplate {
    background-color:#000000;
    border: black dotted;
} 

Any help would be appreciated!

Answer 1

You should use styles prop instead of style

<div style className="col-md-6 offset-md-3">

</div>

Or just remove style prop. The value is empty!

Answer 2

I think it is a typo:

// remove style prop or it will be converted to style={true}
<div className="col-md-6 offset-md-3">
// use "style" prop instead of "styles"
  <p style={styles.boilerplate}>some boilterplate text</p>
</div>

Answer 3

You can find a documentation on how to use inline css in react here.

Your first choice should be to use the ClassName to reference classes defined in an external CSS stylesheet

import React, { Component } from 'react';
import './startPage.module.css' //loading a css file here

class StartPage extends Component {
state = {  }
render() { 
    return ( 
       <div className="container">
           <div className="row">    {/*Row 1 - contains title*/} 
                <div className="col-md-6 offset-md-3"> // remove style
                    <p className='boilerplate'>some boilterplate text</p> // add boilerplate as ClassName
                </div>
           </div>

           <div className="row">    {/*Row 2 - contains buttons*/} 

           </div>
       </div> 
     );
}
}

export default StartPage;

But if you would like to use the style attribute it works like this:

import React, { Component } from 'react';


const divstyles = {
    backgroundColor: '#000000',
    border: 'red dotted'
}

class StartPage extends Component {
state = {  }
render() { 
    return ( 
       <div className="container">
           <div className="row">    {/*Row 1 - contains title*/} 
                <div className="col-md-6 offset-md-3">
                <p style={divstyles}>some boilterplate text</p>
                </div>
           </div>

           <div className="row">    {/*Row 2 - contains buttons*/} 

           </div>
       </div> 
     );
}
}