React CSS Module样式不生效：单组件绑定两个模块化CSS类失败

• React 的 className 属性仅接受字符串类型的输入，你当前传入的是通过对象展开语法生成的普通对象，React 无法识别对象格式的类名，因此样式完全无法挂载。
• CSS Module 导出的 styles 对象中，每个属性对应的值本身就是编译后的字符串类名，无需做对象展开操作，直接取出拼接即可。

基础拼接方案 #

无空值兼容需求时，直接用模板字符串拼接两个类名即可：

import React from "react";
import styles from "./Card.module.css";

const Card = (props) => {
    return (
        <div className={`${styles.Card} ${props.className}`}>
            {props.children}
        </div>
    );
};

export default Card;

空值兼容方案 #

如果存在 props.className 为空的场景，可通过数组过滤掉空值后再拼接，避免生成多余空格：

<div className={[styles.Card, props.className].filter(Boolean).join(' ')}>

复杂场景工具方案 #

如果项目中频繁需要处理多类名、条件类名拼接，可使用第三方工具 classnames 简化代码：

1. 安装依赖：npm install classnames
2. 代码中使用：

import React from "react";
import cx from "classnames";
import styles from "./Card.module.css";

const Card = (props) => {
    return (
        <div className={cx(styles.Card, props.className)}>
            {props.children}
        </div>
    );
};

export default Card;

该工具还支持条件类名配置，例如 cx(styles.Card, {[styles.active]: props.isActive}, props.className)，可以灵活控制类名是否生效。

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