CSS Modules

zCSS Modules有所不同。它不是将 CSS 改造成编程语言，而是功能很单纯，只加入了局部作用域和模块依赖，这恰恰是网页组件最急需的功能。

1.首先，克隆示例库

$ git clone https://github.com/ruanyf/css-modules-demos.git

2.安装依赖

$ cd css-modules-demos
$ npm install

3.接着，就可以运行第一个示例了

$ npm run demo01

一、局部作用域

CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。

产生局部作用域的唯一方法，就是使用一个独一无二的class的名字，不会与其他选择器重名。这就是 CSS Modules 的做法。

例如：

import React from 'react';
import style from './App.css';

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

上面代码中，我们将样式文件App.css输入到style对象，然后引用style.title代表一个class。

.title {
  color: red;
}

App.css也会同时被编译。

._3zyde4l1yATCOkgn-DBWEL {
  color: red;
}

这样一来，这个类名就变成独一无二了，只对App组件有效

运行结果，h1标题显示为红色。

二、全局作用域

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

.title {
  color: red;
}

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

CSS Modules 还提供一种显式的局部作用域语法:local(.className)，等同于.className，所以上面的App.css也可以写成下面这样。

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

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

三、 Class 的组合

在 CSS Modules 中，一个选择器可以继承另一个选择器的规则，这称为"组合"。

中，让.title继承.className 。

.className {
  background-color: blue;
}

.title {
  composes: className;
  color: red;
}

App.js不用修改。

import React from 'react';
import style from './App.css';

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

运行结果，会看到红色的h1在蓝色的背景上。

 

四、输入其他模块

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

another.css

.className {
  background-color: blue;
}

App.css可以继承another.css里面的规则。

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

运行结果，会看到蓝色的背景上有一个红色的h1