css module 组合样式

CSS Modules 提供了一种 composes组合方式，实现对样式的复用。

.base{ /* 基础样式 */
  color: blue;
}
.text { /* 继承基础样式 ，增加额外的样式 backgroundColor */
  composes:base;
  background-color: pink;
}

js 这么写：

import style from './style.css'
export default ()=><div>
  <div className={ style.text } >验证 css modules </div>
</div>

此时的 DOM 元素上的类名变成了如下的样子：

<div class="src-pages-cssModule-style__text--1WHQz src-pages-cssModule-style__base--2gced">验证 css modules </div>

上述可以看到，用了 composes 可以将多个 class 类名添加到元素中。composes 还有一个更灵活的方法，支持动态引入别的模块下的类名。比如上述写的 .base 样式在另外一个文件中，完全可以如下这么写：

style1.css

.base { color: pink; }

style.css

.text { /* 继承基础样式 ，增加额外的样式 backgroundColor */ 
  composes: base from './style1.css'; /* base 样式在 style1.css 文件中 */ 
  background-color: pink; 
}