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