React module CSS（React模块样式）

React模块样式导入

简介

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

模块样式导入要点：

1. 选择器驼峰命名
2. 样式文件后缀名为.module.css
3. 在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;

使用.module.css，再安装CSS Modules插件，Ctrl+点击变量名就可以跳转到对应的样式代码，修改非常方便！：

PS：学会使用vscode的快捷键可以极大的提高编码效率。

再分享一个修改变量名非常方便的插件change-case：

Ctrl+Shift+P 输入case查找该插件，点击编辑按钮可以自定义某个功能快捷键。

如下：我自定义了驼峰命名的快捷键为Ctrl+Shift+C