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