React中如何使用CSS modules向子组件动态传递多个类名

核心问题说明 #

你当前的写法只支持单个类名的原因是：CSS Modules导出的styles对象的每个键对应单个类名，你传入的是空格分隔的多类名字符串，无法直接匹配到styles的键。将传入的类名字符串拆分后逐个映射即可解决。

实现方案 #

方案1：无第三方依赖（原生实现）

直接在子组件内拆分多类名字符串，逐个匹配styles的取值后拼接即可：

import React from "react";
import styles from './Demo.css';

const Demo = (props) => {
  // 拆分多类名→逐个匹配CSS Modules类名→过滤无效值→拼接为最终类名字符串
  const headerClassList = props.headerClass
    .split(' ')
    .map(classItem => styles[classItem])
    .filter(Boolean)
    .join(' ')

  return (
    <div className={headerClassList}>{ props.title }</div>
  );
}

export default Demo;

注：原代码里div的闭合标签误写为</th>，以上代码已修正。

方案2：使用classnames工具库（更适合复杂类名场景）

如果后续需要动态拼接条件类名，推荐使用成熟的classnames工具库简化代码：

1. 先安装依赖：

npm install classnames

2. 子组件代码修改为：

import React from "react";
import cx from 'classnames';
import styles from './Demo.css';

const Demo = (props) => {
  const headerClassList = cx(
    ...props.headerClass.split(' ').map(classItem => styles[classItem])
  )
  return (
    <div className={headerClassList}>{ props.title }</div>
  );
}

export default Demo;

注意事项 #

• 确保你传递的p-1、color-red类名确实在Demo.css中定义，否则映射后会返回undefined，上述代码中的filter(Boolean)就是用来过滤无效值，避免最终类名字符串出现无效内容。
• 如果需要使用全局类名（非CSS Modules局部作用域类），不需要套styles[]，直接加到最终的类名字符串中即可。

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