NextJS中组件级CSS条件设置返回undefined，如何解决？

常见原因及修复方案 #

1. 确认样式文件导入方式 #

必须通过命名导入获取CSS Modules的样式对象，不能用普通导入：

// 正确写法
import styles from './MyComponent.module.css';

// 错误写法：无法通过styles.xxx访问类名
import './MyComponent.module.css';

2. 修正三元表达式的类名调用逻辑 #

一定要通过styles对象访问类名，同时给type属性设置默认值避免判断异常：

错误示例（直接写字符串类名/无默认值）

// 错误：未映射到CSS Modules生成的哈希类名，且type为undefined时返回异常
<div className={props.type === 'primary' ? 'primary' : 'secondary'}></div>

正确示例

import styles from './MyComponent.module.css';

function MyComponent({ type = 'primary' }) {
  const className = type === 'primary' ? styles.primary : styles.secondary;
  return <div className={className}></div>;
}

export default MyComponent;

3. 增加兜底判断避免异常 #

如果父组件可能传入非预期的type值，添加兜底逻辑确保不会返回undefined：

const className = ['primary', 'secondary'].includes(type) 
  ? styles[type] 
  : styles.primary;

4. 验证CSS文件类名定义 #

检查MyComponent.module.css中的类名拼写，确保无语法错误：

.primary {
  background-color: #0070f3;
  color: #fff;
}

.secondary {
  background-color: #e5e7eb;
  color: #111827;
}

额外技巧：用clsx简化多条件样式 #

Next.js默认内置clsx库，可轻松处理多条件组合样式：

import styles from './MyComponent.module.css';
import clsx from 'clsx';

function MyComponent({ type = 'primary', isDisabled }) {
  const className = clsx(
    type === 'primary' ? styles.primary : styles.secondary,
    isDisabled && styles.disabled // 叠加禁用状态样式
  );
  return <div className={className}></div>;
}

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