React CSS Modules使用

在react项目中：

import React from 'react';
import styles from './index.less';
<div className="footer">
    用户协议
 </div>

其中index.less中代码为：

.footer{
    height: 100px;
    padding: 40px 0;
    text-align: center;
    color: #d7d7d7
}

效果为：

那么在react中如何使用css modules呢？
第一步：在webpack.config.js中增添modules: true

第二步：在index.js中增加：

这时发现footer的类名被解析成：

这就是css modules的优势，每个 CSS 类都被赋予了一个带有全局唯一名字的本地标识符，避免全局污染。
如果不想每次都敲style.类型，可以使用styleName,其方法为：

这时实现的效果是一样的，class为footer的类名被解析成了：

如果想更下footer下面的公共组件的样式，可以使用:global
这里html引入一个Button公共组件：

<div styleName="footer">
    用户协议
    <Button type="primary">查询</Button>
</div>

其中Button下面的类被渲染成：

如果想更改button的样式，可以这样引入:global
·

.footer{
    height: 100px;
    padding: 40px 0;
    text-align: center;
    color:@colorJ;
    :global {
        .ant-btn {
            color: #478fff;
        }
    }
}

这样就能实现修改button样式的效果了。