在 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">`。
