亲宝软件园·资讯

展开

React引入css的三种方式小结

叉叉酱 人气:0

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'

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

加载全部内容

相关教程
猜你喜欢
用户评论