React引入css的三种方式小结
作者：叉叉酱
这篇文章主要介绍了React引入css的三种方式小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
React引入css的方法
<div style="color:red">测试数据</div> //报错
在React中，如果直接按上面的方式写内联样式会直接报错，因为JSX语法不支持
React支持以下三种写css的方法：
1.行内样式
...
<div style={{
width:'200px',
height:'80px',
backgroundColor:'yellow',
fontSize:'24px',
textAlign:'center'
}}>测试数据</div>
...2.声明样式
声明样式和行内样式类似，区别只是声明一个变量保存样式表绑定给style属性。
...
<div style={{
width:'200px',
height:'80px',
backgroundColor:'yellow',
fontSize:'24px',
textAlign:'center'
}}>测试数据</div>
...3.import引入
一个React组件一般就是一个文件夹，文件夹里包含对应的js和css，只要在js中引入同级的css即可。
import './mystyle.css';
React中css局部引入
配置Webpack模块化导入CSS
在新项目创建好时，使用命令yarn eject，显示配置文件
打开config/webpack.config.js
在检测CSS的地方(426行)添加如下
modules: true, getLocalIdent: getCSSModuleLocalIdent,
使用：
import style from './TestCss.css';
<span className={style.one}>hello</span>
<span id={style.two}>world</span>在React项目中使用Sass
安装node-sass包 yarn add node-sass
创建sass文件(以.scss为后缀名，在内部写css代码)
.TestSass {
span {
color: red;
}
}引入对应的JS文件或者JSX文件
import 'TestSass.scss'
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。