CODEWITHSUNDEEP
reactjs
hexaquark
hexaquark

Reputation: 941

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

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?

Upvotes: 0

Views: 595

Answers (1)

Ala Hamadi
Ala Hamadi

Reputation: 251

  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;
}
  1. Import the module you’ve just created from within your component, like you did:
import styles from './components/sideMenu/SideMenu.module.css';
  1. 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>

Upvotes: 1

Related Questions