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;
使用.module.css，再安装CSS Modules插件，Ctrl+点击变量名就可以跳转到对应的样式代码，修改非常方便！：
PS：学会使用vscode的快捷键可以极大的提高编码效率。
再分享一个修改变量名非常方便的插件change-case：
Ctrl+Shift+P 输入case查找该插件，点击编辑按钮可以自定义某个功能快捷键。
如下：我自定义了驼峰命名的快捷键为Ctrl+Shift+C
