CSS Module中出现Cannot read properties of undefined错误求助

错误根源 #

控制台报错Cannot read properties of undefined (reading 'Hamburger')，核心原因是你尝试访问appCSS.searchbarForm[requestedBy]，但appCSS.searchbarForm本身是undefined——这说明你的CSS模块里不存在searchbarForm这个类，或者你误解了CSS模块的类名结构。

CSS模块会把每个类名编译成独立的字符串属性，不存在嵌套的对象结构。比如你如果在CSS里写嵌套样式：

.searchbarForm {
  .Hamburger { ... }
}

编译后appCSS里只会有appCSS.searchbarForm和appCSS.Hamburger两个独立的字符串属性，而不是appCSS.searchbarForm包含Hamburger子属性。

修复步骤 #

1. 调整CSS模块的类名写法 #

如果需要根据requestedBy和navStatus动态添加类，建议把类名写成扁平化的格式，比如：

/* App.module.css */
.searchbarForm--Hamburger { /* 对应navStatus为Hamburger时的样式 */ }
.searchbarForm--Header { /* 对应requestedBy为Header时的样式 */ }

2. 修改组件代码的类名访问逻辑 #

直接通过模板字符串拼接类名，并添加兜底处理，避免变量为空或无对应类名时出错：

import React from 'react'
import SearchIcon from '../../images/search.svg'
import appCSS from '../CSS/App.module.css';

export default function SearchInput({requestedBy, navStatus}) {
  // 生成动态类名，兜底空值
  const requestedClass = requestedBy ? appCSS[`searchbarForm--${requestedBy}`] : '';
  const navStatusClass = navStatus ? appCSS[`searchbarForm--${navStatus}`] : '';

  // 合并类名并去除多余空格
  const formClasses = `${requestedClass} ${navStatusClass}`.trim();

  return (
    <form className={formClasses}>
      <input type="text" placeholder='Search for courses or teachers'/>
      <button type='submit'>
        <img src={SearchIcon} alt="search icon" />
      </button>
    </form>
  )
}

3. 特殊情况：如果用SCSS嵌套样式 #

如果你确实需要用SCSS嵌套，要明确searchbarForm和子类是独立的，代码应该改成：

// 此时CSS里是 .searchbarForm .Hamburger { ... }
<form className={`${appCSS.searchbarForm} ${navStatus ? appCSS[navStatus] : ''}`}>

额外注意 #

• 确保requestedBy和navStatus传入的是字符串值，且与CSS里的类名后缀完全匹配（大小写敏感）
• 用trim()避免两个类名都为空时生成多余的空格

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