在React中使用SCSS时，如何为HTML元素添加多个类名？

问题原因 #

你当前使用的(styles.gridItem, styles.imageWithText)是JavaScript的逗号运算符，它会依次执行多个表达式，但最终仅返回最后一个表达式的结果。这就导致实际上只有styles.imageWithText类名被应用，gridItem的样式自然不会生效。

解决方法 #

方法1：手动用模板字符串拼接类名 #

SCSS模块会将每个类名编译为唯一的哈希字符串，直接通过模板字符串把两个类名字符串用空格拼接即可：

import styles from "../styles/styles.module.scss";

export default function InfoPage({}: PageProps) {
  return (
    <div className={styles.gridContainer}>
      <div className={styles.gridItem}>
        ...
      </div>
      
      {/* 正确拼接多类名 */}
      <div className={`${styles.gridItem} ${styles.imageWithText}`}>
        ...
      </div>
    </div>
  );
}

方法2：使用classnames库（适合复杂场景） #

如果需要处理条件类名等复杂场景，推荐使用classnames库，它能更简洁地管理多类名：

1. 先安装依赖：

npm install classnames
# 或
yarn add classnames

2. 修改组件代码：

import styles from "../styles/styles.module.scss";
import classNames from 'classnames';

export default function InfoPage({}: PageProps) {
  return (
    <div className={styles.gridContainer}>
      <div className={styles.gridItem}>
        ...
      </div>
      
      {/* 使用classnames组合多类名 */}
      <div className={classNames(styles.gridItem, styles.imageWithText)}>
        ...
      </div>
    </div>
  );
}

这种方式还支持条件判断，比如：

// 仅当isActive为true时添加额外类名
<div className={classNames(styles.gridItem, styles.imageWithText, { [styles.active]: isActive })}>
  ...
</div>

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