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

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>