如何在React中使用CSS模块（附代码）

CSS模块是对React组件进行造型的最流行方式之一。无论你是只使用CSS还是像SASS这样更高级的预处理器，对CSS模块来说都不重要。你可以在你的React组件旁边的样式表文件中写入所有这些样式。

由于我们是在一个自定义的React+Webpack应用程序的基础上建立起来的，所以在我们开始在React中使用CSS Modules之前，需要从我们这边进行一些设置。我想感谢Arpit Batra向我们展示了它是如何工作的。

注意：如果你正在使用create-react-app，只需遵循这个用CSS模块创建React应用程序的教程。它自带CSS模块，开箱即用。如果你使用的是自定义React+Webpack设置，也许是我之前的教程，请继续阅读，在你的自定义React项目中设置CSS模块。

首先，我们还需要一些Webpack的加载器。这些加载器使Webpack也能捆绑CSS文件。

npm install css-loader style-loader --save-dev

其次，在你的webpack.config.js文件中，添加新的加载器来解释CSS文件：

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.css$/i,
        exclude: /node_modules/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
        ],
      },
    ],
  },
  ...
};

这就是Webpack中CSS模块设置的全部内容。接下来，你可以定义你的第一个CSS文件。让我们把它命名为src/style.css。

.title {  color: blueviolet;}

然后你可以在你的一个React组件中导入这个CSS文件。之后，你已经可以在你的React组件中使用CSS文件中定义的CSS类。只要把它导入并在你的React组件中使用其定义的CSS类作为className道具：

import React from 'react';

import styles from './style.css';

const App = ({ title }) => (
  <div className={styles.title}>{title}</div>
);

export default App;

从这里开始，你准备在你的React组件旁边添加更多的CSS文件。通常情况下，每个React组件会使用一个样式文件。在这个CSS文件中，你可以自由地添加你所需要的CSS类来为你的React组件添加样式。只需从CSS文件中导入样式，并在你的React组件中使用它们，如前所述。