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: tomato;
}

• 再给组件加上类名
  

  

css 模块化

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

• 样式如下
  
  

• 引入时
  
  

• 效果如下