react下应用css-module

遇到问题

在这次的项目中，我在写登录注册模块时，想给注册页面添加一些样式，发现我所添加的样式是全局有效，导致我的登录页面样式也受到了影响，以前我们的解决办法是确保给每个页面的样式起不同的类名，但是这次我想用一些简便的方法。

google查找解决方案

我想这样的问题，别人肯定也遇到过，肯定已经有解决的办法，之后就在网上发现好多可供使用的插件,分别有：

css in js
css modules
ant-design

详细介绍
而我选择了眼熟的css-module使用

概念学习css-module

thumbnail.png

代码实现

1. webpack.config.js文件中进行相应的配置，添加如下代码段

 {
                test: /\.css$/,
                loader: "style-loader!css-loader?modules"
}

下面是我项目中webpack.config.js文件的配置

var path = require('path');
module.exports = {
    entry: './public/src/entry.js',
    output: {
        path: path.join(__dirname, 'public/dist'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style-loader!css-loader?modules"
            }, 
            {test: /\.png$/, loader: "file-loader"},
            {test: /\.jpg$/, loader: "file-loader"},
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    presets: ['react', 'es2015']
                }
            }
        ]
    }
};

2.接下来就是在react下使用代码实现了，我的思路是这样的：首先创建两个文件login.js和resigner.js,再分别创建两个对应的css文件login.css和resigner.css文件
我在login.js和resigner.js中分别定义两个相同的类名title的输入框，在login.css和resigner.css中两个title分别添加不同的样式，如果样式正常显示，则说明css-module应用正常。

login.js
import React, {Component} from "react";
import {render} from "react-dom";
import style from "../../../assest/css/login.css"

class Login extends Component {
    render() {
        return <div>
            <form action="">
                用户名：<input id="userName" type="text" placeholder="输入姓名" className={style.title}/>
            </form>
        </div>
    }
}
export default Login;

resigner.js

import React, {Component} from "react";
import {render} from "react-dom";
import style from '../../../assest/css/resigner.css';

class Resigner extends Component {
    render() {
        return <div id="form">
            <div>
                <input id="userName" type="text" placeholder="输入姓名" className={style.title}/>
            </div>
             <div>
                <input type="submit" value='注册' onClick={this.handleChange.bind(this)}/>
            </div>
        </div>
    }
}
export default Resigner;

login.css

.title {
  background-color: aquamarine;
}

resigner.css

.title {
    background-color: blanchedalmond;
}

代码解释:
在两个js文件中我分别给input输入框的className赋值为{style.title}，这样css-module在编译期间就会分别生成一个唯一的哈希字符串类名。

3.运行结果

css-module.png
运行demo的github地址：https://github.com/DQing/css-module-demo

---

希望这篇文章能够有帮到你～
有任何问题可以在下面留言哦