在 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 (

Hello World

); }; ~~~ 运行这个示例。 ~~~ $ 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`也会编译成`

`。