ReactJS中使用CSS Modules复用多类名样式的实现方法

在CSS Modules里实现你要的这种多类名叠加复用效果，逻辑和普通CSS基本一致，只需要调整组件里的类名引用方式就行，具体步骤如下：

1. 编写.module.css样式文件 #

和你原来的写法几乎一样，创建一个比如styles.module.css文件：

.myClass {
  background-color: red; /* 修正了你原代码里的拼写错误 */
}

.myClass.yellow {
  background-color: yellow;
}

CSS Modules会自动给每个类名添加唯一的哈希前缀，但类之间的叠加选择器（比如.myClass.yellow）依然能正常匹配，因为两个类名的前缀是一致的。

2. 在React组件中组合类名 #

首先从module文件导入样式对象，然后通过模板字符串或者数组拼接的方式把多个类名组合起来：

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

function MyComponent() {
  // 模板字符串写法
  return <div className={`${styles.myClass} ${styles.yellow}`} />;
}

或者用数组join的方式，避免空格问题：

<div className={[styles.myClass, styles.yellow].join(' ')} />

可选：用工具库简化类名组合 #

如果经常需要组合类名，推荐用classnames库（npm安装即可），写法更简洁，还支持条件渲染：

import classNames from 'classnames';
import styles from './styles.module.css';

function MyComponent({ isYellow }) {
  return (
    <div 
      className={classNames(styles.myClass, { 
        [styles.yellow]: isYellow 
      })} 
    />
  );
}

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