四、 Class 的组合

在 CSS Modules 中，一个选择器可以继承另一个选择器的规则，这称为"组合"（"composition"）。

在App.css中，让.title继承.className 。

 .className {
   background-color: blue;
 }
 
 .title {
   composes: className;
   color: red;
 }

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，会看到红色的h1在蓝色的背景上。

App.css编译成下面的代码。

 ._2DHwuiHWMnKTOYG45T0x34 {
   color: red;
 }
 
 ._10B-buq6_BEOTOl9urIjf8 {
   background-color: blue;
 }

相应地， h1的class也会编译成<h1 class="_2DHwuiHWMnKTOYG45T0x34 _10B-buq6_BEOTOl9urIjf8">。