当前位置:牛骨文开发手册前端基础html/CSSCSS Modules 用法教程 》 四、 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;
 }

相应地, h1class也会编译成<h1 class="_2DHwuiHWMnKTOYG45T0x34 _10B-buq6_BEOTOl9urIjf8">