在 CSS Modules 中,一个选择器可以继承另一个选择器的规则,这称为"组合"(["composition"](https://github.com/css-modules/css-modules#composition))。 在[`App.css`](https://github.com/ruanyf/css-modules-demos/blob/master/demo04/components/App.css)中,让`.title`继承`.className` 。 ~~~ .className { background-color: blue; } .title { composes: className; color: red; } ~~~ [`App.js`](https://github.com/ruanyf/css-modules-demos/blob/master/demo04/components/App.js)不用修改。 ~~~ import React from 'react'; import style from './App.css'; export default () => { return ( <h1 className={style.title}> Hello World </h1> ); }; ~~~ 运行这个示例。 ~~~ $ npm run demo04 ~~~ 打开`http://localhost:8080`,会[看到](http://ruanyf.github.io/css-modules-demos/demo04/)红色的`h1`在蓝色的背景上。 `App.css`编译成下面的代码。 ~~~ ._2DHwuiHWMnKTOYG45T0x34 { color: red; } ._10B-buq6_BEOTOl9urIjf8 { background-color: blue; } ~~~ 相应地, `h1`的`class`也会编译成`<h1 class="_2DHwuiHWMnKTOYG45T0x34 _10B-buq6_BEOTOl9urIjf8">`。