react中样式的模块化使用_react中的样式模块是什么时候提出来的-CSDN博客

本文介绍了在create-react-app 2.0及以上版本中如何使用CSS Modules实现CSS的局部作用域，避免样式冲突。通过`.module.css`文件进行局部样式定义，而`.css`文件用于全局样式。同时提到了CSS Modules的命名规则以及全局样式与局部样式的混合使用方法。CSS Modules旨在解决传统CSS全局作用域导致的问题，使得CSS更符合软件工程的要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

4CSS Modules

CSS Modules 的做法就是通过配置将.css文件进行编译，编译后在每个用到css的组件中的css类名都是独一无二的，从而实现CSS的局部作用域。具体原理可以看看阮一峰老师的博客 CSS Modules 用法教程。

在create-react-app2.0之前的版本，配置CSS Modules是需要eject弹出webpack来配置的，幸运的是，create-react-app自从2.0.版本就已经开始支持CSS Modules了，详见官网。可见create-react-app对webpack零配置的追求

本段主要讲解create-react-app2.0以上版本的CSS Modules的用法：

局部样式命名规则: xxx.module.css

              引入方式 import xxx from 'xxx.module.css'

              用法：<div className={xxx.styleName}>

全局样式命名规则: xxx.css

               引入方式 import ‘xxx.css’

               用法：<div className='styleName'>

全局样式与局部样式混合使用： <div className={styleName ${xxx['styleName']}} > 其中styleName表示全局样式 ${xxx[‘styleName’]表示局部样式，注意{ }内使用模板字符串 · ·

http://www.ruanyifeng.com/blog/2016/06/css_modules.html

css不能算是编程语言，只是网页样式一种描述方法；

为了让css 也适用到软件工程方法，从less到sass到后来postcss

局部作用域：
css的规则是全局的，任何一个的样式规则，对整个页面有效

产生作用域的唯一方法，就是使用一个独一无二的class的名字，
，这就是cssmodules的做法

import React from 'react';
import style from './App.css';

export default () => {
 	return (
		<h1 className={style.title}>
			Hello World
		</h1>
	);
}

使用scss中的模块化，必须要，index.moudle.css 才能被引用