React — css 样式的模块化

问题描述

• 当不同组件中的css规则，存在冲突时，高优先级的样式，就会覆盖低优先级的样式，示例如下：

• 目录结构

  
  

• 样式冲突

  
  

• Welcome 组件后引入，因此覆盖Hello组件的样式

  
  

• 如下

  
  
• 当组件越来越多的时候，我们当然不想组件之间产生干扰，看如下两种解决方案

解决方案

css预处理工具（更常用）

• 通过给样式加上区分组件的前缀，避免样式的冲突

.hello {
    h1 {
        background-color: tomato;
    }
}
.welcome {
    h1 {
        background-color: gold
    }
}

/* 会被翻译成这样 */

.hello h1 {
    background-color: tomato;
}
.welcome h1 {
    background-color: gold;
}

• 再给组件加上类名

  
  
  

css 模块化

• 首先需要将样式文件后缀修改为 .module.css

  
  

• 样式如下

  
  
  

• 引入时

  
  
  

• 效果如下