react中css modules的介绍与使用

React 中 CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效，这可能会导致大量的冲突。也就是说如果我有两个css文件，它们的中的一些样式名是一样的，那么就会被覆盖，简单的解决办法就是将样式的命名变得复杂且不重复，但这样样式多了也很难避免重复，且命名也不会太好看。

那么这个时候就推荐使用CSS 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.css引入方式 import 'xxx.css'

用法：<div className='styleName'>

局部样式（css modules）

注：css modules会默认给类名加上一个唯一标识符（哈希字符串），从而实现类名不重复

命名规则: xxx.module.css

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

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

css modules语法:

：global(.className)

CSS Modules 允许使用:global(.className)的语法，声明一个全局规则。凡是这样声明的class，都不会被编译成哈希字符串。代码如下：

.title {
  color: red;
}
:global(.title) {
  color: green;
}

:local(.className)

CSS Modules 还提供一种显式的局部作用域语法:local(.className)，

下面代码等同于上面的代码：

:local(.title) {
  color: red;
}
:global(.title) {
  color: green;
}

继承

继承在 CSS Modules 中，一个选择器可以继承另一个选择器的规则，这称为"组合"（"composition"）。使用 composes 属性进行继承

.className {
  background-color: blue;
}
.title {
  composes: className;
  color: red;
}

组件使用样式

import React from 'react';
import style from './test.module.css';

export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
  };

最终会看到红色的h1在蓝色的背景上

选择器也可以继承其他CSS文件里面的规则

another.module.css.

className {
  background-color: blue;
}

其它css文件可以继承 another.module.css 里面的规则

.title {
  composes: className from './another.module.css';
  color: red;
}