汉堡菜单中“线条div”高度无法设置的问题求助

我尝试创建一个汉堡菜单，内部用3个div作为线条，后续将为其添加开合动画，但不清楚如何设置这些div的高度使其显示。

我的SCSS代码（模块样式） #

.navbar {
  padding: 5px;
  height: 50px;
  display: flex;
  justify-content: space-between;

  .hamburger-menu {
    height: 100%;
    width: 40px;
    background-color: coral;

    .menu {
      height: inherit;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      cursor: pointer;

      &-line {
        width: 100%;
        height: 5px;
        background-color: white;
      }
    }
  }
}

我的JSX组件代码 #

import { Fragment } from "react";
import styles from "../../styles/layout/navigation.module.scss";

const Navigation = (props) => {
  return (
    <Fragment>
      <div className={styles["navbar"]}>
        <input type="checkbox" id="check" className={styles["checkbox"]} />
        <div className={styles["hamburger-menu"]}>
          <label htmlFor="check" className={styles["menu"]}>
            <div className={styles["menu-line menu-line-1"]}></div>
            <div className={styles["menu-line menu-line-2"]}></div>
            <div className={styles["menu-line menu-line-3"]}></div>
          </label>
        </div>
      </div>
      <Fragment>{props.children}</Fragment>
    </Fragment>
  );
};

export default Navigation;

说明：我所说的“线条”指的是这三个div：

<div className={styles["menu-line menu-line-1"]}></div>
<div className={styles["menu-line menu-line-2"]}></div>
<div className={styles["menu-line menu-line-3"]}></div>

问题原因及解决方法 #

你的SCSS代码本身没问题，menu-line类已经设置了height:5px和白色背景，线条不显示的核心问题是CSS Modules的类名引用错误：

你不能直接把两个类名menu-line menu-line-1放在同一个styles[]里，因为CSS Modules会对每个类名单独进行哈希编译，这种写法无法正确解析出menu-line的样式，导致线条的高度和背景色都没生效。

修正方法：

把多个类名分开通过styles获取，用模板字符串拼接：

<div className={`${styles["menu-line"]} ${styles["menu-line-1"]}`}></div>
<div className={`${styles["menu-line"]} ${styles["menu-line-2"]}`}></div>
<div className={`${styles["menu-line"]} ${styles["menu-line-3"]}`}></div>

这样修改后，menu-line的样式（包括height:5px）就能正确应用到线条div上，它们会正常显示出来。

另外检查父元素布局：.menu继承了父级的50px高度，flex垂直布局+justify-content:space-around会让三个线条在汉堡按钮内均匀分布，这个布局逻辑是没问题的，后续添加开合动画也可以基于这个结构来做。

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