能否在React类式组件（旧createReactClass代码）中使用CSS Modules？有无简便方案？

不用重构现有React组件，针对你遇到的跨文件无法使用CSS Modules类的问题，核心是利用CSS Modules的局部作用域特性，用下面几个简便方法就能解决：

1. 先在当前组件里正确使用CSS Modules #

你现在的代码只是导入了styles但没在组件中应用，要先把类名通过styles对象绑定到元素上：

import styles from "styles.module.css"

var Greeting = createReactClass({
    render: function() {
        // 假设styles.module.css里定义了.greeting类
        return <h1 className={styles.greeting}>Hello</h1>;
    }
});

2. 跨文件使用CSS Modules类的几种方案 #

方案一：传递styles对象给目标文件/组件 #

如果其他文件需要用到这个类，可以通过props把对应的类名传递过去：

// 其他文件的组件
var OtherComponent = createReactClass({
    render: function() {
        return <div className={this.props.greetingClass}>Hi there</div>;
    }
});

// 在使用OtherComponent的地方传递类名
<OtherComponent greetingClass={styles.greeting} />

方案二：定义全局可用的类 #

如果某些样式需要全局通用，在CSS Modules文件里用:global()包裹类名，就能直接在任意文件里使用原始类名：

/* styles.module.css */
:global(.global-greeting) {
  color: #333;
  font-size: 24px;
}

然后在任意组件里直接写：

return <h1 className="global-greeting">Hello</h1>;

方案三：单独维护共享样式文件 #

把需要跨文件复用的样式抽成独立的CSS Modules文件，在每个需要的文件里直接导入使用：

/* shared-styles.module.css */
.shared-title {
  font-weight: bold;
  margin-bottom: 16px;
}

在目标文件导入：

import sharedStyles from "./shared-styles.module.css"

var AnotherComponent = createReactClass({
    render: function() {
        return <h2 className={sharedStyles['shared-title']}>Subtitle</h2>;
    }
});

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