ReactJs using styles css module on react-burger-menu component - reactjs

Question

I am working with react-burger-menu and I am having trouble setting the styles={styles} tag on the menu component, from a CSS module.
Given :
./App.js
import Page from './components/Page/Page';
import SideMenu from './components/sideMenu/SideMenu.js';
import styles from './components/sideMenu/SideMenu.module.css';
function App() {
return (
<div className="app" id="app">
<SideMenu styles={ styles } pageWrapId={ "page-wrap" } outerContainerId={ "app" }/>
<div id="page-wrap">
<Page />
</div>
</div>
);
}
export default App;
./sideMenu/SideMenu.js
import React from "react";
import { scaleRotate as Menu } from "react-burger-menu";
export default props => {
return (
<Menu {...props} >
<a className="menu-item" href="/">
Home
</a>
</Menu>
);
};
./sideMenu/SideMenu.module.css
.bm-burger-button {
position: fixed;
width: 36px;
height: 30px;
right: 36px;
top: 36px;
}
.bm-burger-bars {
background: #373a47;
}
I am unable to pass the prop styles to SideMenu menu bar. The stylesheet is just not read. I have also tried style={styles} instead. If I omit the styles={styles} tag and just put the CSS styling in ./index.css then the styling is rendered correctly but I want to separate the menu styling as a module.
I have also tried to write the
import styles from '../../components/sideMenu/SideMenu.module.css'
inside the sideMenu/SideMenu.js file instead, and return (<Menu {...props} styles={styles}> (...) but still with no success.
Finally, I have also tried to set
<div className="app" id="app" styles={styles}> (...) </div>
in ./App.js as it was suggested in this post but that doesn't work either.
Does anyone know what I am doing wrong?

Answer 1

First, it’s recommend to use camelCase for classes with more than one word. The reason for this is that you’ll access these classes later as properties of a JS object, hyphens are not syntactically allowed. So you must first of all change your SideMenu.module.css for example like this:
.bm_burger_button {
position: fixed;
width: 36px;
height: 30px;
right: 36px;
top: 36px;
}
.bm_burger_bars {
background: #373a47;
}
Import the module you’ve just created from within your component, like you did:
import styles from './components/sideMenu/SideMenu.module.css';
To use a class defined in your module, just refer to it as a normal property from the styles object, like:
<div className={styles.bm_burger_button}> (...) </div>