Reputation: 941
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 :
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;
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>
);
};
.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?
Upvotes: 0
Views: 595
Reputation: 251
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 styles from './components/sideMenu/SideMenu.module.css';
<div className={styles.bm_burger_button}> (...) </div>
Upvotes: 1