React module CSS（React模块样式）_react module.css-CSDN博客

本文介绍了在React项目中从使用全局CSS样式转向模块化CSS（.module.css）的过程，以解决样式冲突问题。通过模块样式，实现组件的局部样式，并推荐了CSS Modules插件以方便样式代码的定位和编辑。此外，还分享了VSCode中提高编码效率的快捷键技巧，包括使用change-case插件进行变量名快速转换的设置。

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

React模块样式导入

🍋 简介

一开始开发react项目使用的是.css样式，在.js文件中引入并使用className，但是项目合并后发现.css样式会影响项目中其他组件的样式，然而在react中又不可以直接编写局部样式（在HTML和vue中可以编写scoped样式），所以改成以模块导入的形式编写组件样式。

模块样式导入要点：

选择器驼峰命名
样式文件后缀名为.module.css
在js文件中导入并使用

1️⃣ before：使用css

style.css

.home-wrapper{
	background: #f00;
	width: 100%;
	height: 500px;
}

Hello.js

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

function Hello(props) {
  return (
    <div className='home-wrapper'></div>
  );
}

export default Hello;

2️⃣ after：使用.module.css

style.module.css

.homeWrapper{
	background: #f00;
	width: 100%;
	height: 500px;
}

Hello.js

import React from 'react';
import styles from './style.module.css';

function Hello(props) {
  return (
    <div className={styles.homeWrapper}></div>
  );
}

export default Hello;