ReactJs在react-burger-menu组件上使用样式css模块

Question

我正在使用react-burger-menu，在从CSS模块设置菜单组件上的styles={styles}标记时遇到了问题。

给定：

./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;
}

我无法将prop styles传递到SideMenu菜单栏。样式表就是不能读。我也尝试过style={styles}。如果我省略了CSS标记，只把styles={styles}样式放在./index.css中，那么样式就会被正确呈现，但是我想把菜单样式作为一个模块来分离。

我还试着写了

import styles from '../../components/sideMenu/SideMenu.module.css'

在sideMenu/SideMenu.js文件中，使用return (<Menu {...props} styles={styles}> (...)，但仍未成功。

最后，我还尝试设置

<div className="app" id="app" styles={styles}> (...) </div>

在./App.js中，就像在this post中建议的那样，但这也不起作用。

有人知道我做错了什么吗？

Answer 1

1. 首先，建议对包含多个单词的类使用camelCase。这样做的原因是，您将在稍后作为JS对象的属性访问这些类，在语法上不允许使用连字符。因此，您必须首先更改SideMenu.module.css，例如：

.bm_burger_button {
  position: fixed;
  width: 36px;
  height: 30px;
  right: 36px;
  top: 36px;
}

.bm_burger_bars {
  background: #373a47;
}

1. 导入刚刚在组件中创建的模块，就像您所做的那样：

import styles from './components/sideMenu/SideMenu.module.css';

1. 若要使用模块中定义的类，只需将其作为样式对象中的普通属性引用即可，如：

<div className={styles.bm_burger_button}> (...) </div>