React引入css的三种方式小结

叉叉酱 2022-12-02 我要评论

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'

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。