react中样式的模块化使用

4CSS Modules

CSS Modules 的做法就是通过配置将.css文件进行编译，编译后在每个用到css的组件中的css类名都是独一无二的，从而实现CSS的局部作用域。具体原理可以看看阮一峰老师的博客 CSS Modules 用法教程。

在create-react-app2.0之前的版本，配置CSS Modules是需要eject弹出webpack来配置的，幸运的是，create-react-app自从2.0.版本就已经开始支持CSS Modules了，详见官网。可见create-react-app对webpack零配置的追求

本段主要讲解create-react-app2.0以上版本的CSS Modules的用法：

局部样式 命名规则: xxx.module.css

              引入方式 import xxx from 'xxx.module.css'

              用法：<div className={xxx.styleName}>

全局样式 命名规则: xxx.css

               引入方式 import ‘xxx.css’

               用法：<div className='styleName'>

全局样式与局部样式混合使用： <div className={ styleName ${xxx['styleName']}} > 其中styleName表示全局样式 ${xxx[‘styleName’]表示局部样式，注意{ }内使用模板字符串 · ·

http://www.ruanyifeng.com/blog/2016/06/css_modules.html