react-burger-menu组件使用CSS Module设置styles属性不生效问题求助

问题根源 #

1. react-burger-menu的styles属性设计用于接收内联样式对象，你传入的CSS Module导出的类名映射对象不符合要求，因此不会生效。
2. CSS Module默认会对文件内的类名做局部哈希编译，你在SideMenu.module.css中直接写的.bm-burger-button这类类名，会被编译为类似SideMenu_bm-burger-button__a1b2的带哈希后缀的类名，和react-burger-menu实际渲染的全局.bm-burger-button类名无法匹配，因此样式不生效。你把样式写在全局的index.css中能生效，正是因为全局样式不会被编译哈希。

解决方案1：保留类名全局匹配（改动最小） #

给CSS Module中所有.bm开头的类名包裹:global()标记，告诉编译器不要对这些类名做哈希编译，保留原始类名匹配组件自带的全局类：

/* ./sideMenu/SideMenu.module.css */
:global(.bm-burger-button) {
  position: fixed;
  width: 36px;
  height: 30px;
  right: 36px;
  top: 36px;
}

:global(.bm-burger-bars) {
  background: #373a47;
}

然后直接在SideMenu.js中导入该样式文件即可，不需要给Menu组件传styles属性：

// ./sideMenu/SideMenu.js
import React from "react";
import { scaleRotate as Menu } from "react-burger-menu";
// 直接导入样式，不需要赋值给styles变量
import "./SideMenu.module.css";

export default props => {
  return (
    <Menu {...props} >
      <a className="menu-item" href="/">
        Home
      </a>
    </Menu>
  );
};

如果担心全局类名冲突，可以加局部命名空间限制作用范围：

// SideMenu.js 新增自定义类名
import styles from "./SideMenu.module.css";
<Menu className={styles.menuWrap} {...props} >

/* SideMenu.module.css 调整选择器 */
.menuWrap :global(.bm-burger-button) {
  /* 样式不变 */
}

解决方案2：使用组件提供的自定义类名prop（符合模块化最佳实践） #

react-burger-menu支持给每个内置元素单独指定自定义类名，你可以直接传入CSS Module生成的局部类名，完全避免全局类污染：

/* ./sideMenu/SideMenu.module.css 自定义类名即可，不需要.bm前缀 */
.burgerBtn {
  position: fixed;
  width: 36px;
  height: 30px;
  right: 36px;
  top: 36px;
}
.burgerBar {
  background: #373a47;
}

// ./sideMenu/SideMenu.js 传入对应类名prop
import React from "react";
import { scaleRotate as Menu } from "react-burger-menu";
import styles from "./SideMenu.module.css";

export default props => {
  return (
    <Menu 
      {...props}
      burgerButtonClassName={styles.burgerBtn}
      burgerBarClassName={styles.burgerBar}
      {/* 其他需要自定义的元素可对应传prop：menuClassName、itemClassName、overlayClassName等 */}
    >
      <a className="menu-item" href="/">
        Home
      </a>
    </Menu>
  );
};

内容的提问来源于stack exchange，提问作者hexaquark