When working on my react application, I encountered an issue where I needed to locally style one of my components. To achieve this, I decided to follow the yourCSS.module.css convention.
Within my myComponent.jsx file, I imported the CSS-Module as shown below:
import React, { Component } from 'react';
import styles from './startPage.module.css' //loading the css module
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;
However, upon testing the component, I encountered an error in the 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.
Currently, my CSS includes the following styling for the `.boilerplate` class:
.boilerplate {
background-color:#000000;
border: black dotted;
}
If anyone has any insights or suggestions on how to resolve this issue, it would be greatly appreciated!