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';
相关文章
|
4天前
|
前端开发
|
4天前
|
Android开发
jmessage-react-plugin的正确引入方法
jmessage-react-plugin的正确引入方法
7 1
|
8天前
|
前端开发 容器
CSS 中几种常用的换行方法
CSS 中几种常用的换行方法
14 1
|
21天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
10 2
|
1月前
|
前端开发 JavaScript 开发者
请详细介绍React挂载阶段的方法。
请详细介绍React挂载阶段的方法。
44 9
|
27天前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
16 3
|
4天前
|
前端开发 UED
css性能优化的方法
css性能优化的方法
9 0
|
11天前
|
前端开发
CSS绘制三角形的方法
CSS绘制三角形的方法
|
24天前
封装react-antd-table组件参数以及方法如rowSelection、pageNum、pageSize、分页方法等等
文章介绍了如何封装React-Antd的Table组件,包括参数和方法,如行选择(rowSelection)、页码(pageNum)、页面大小(pageSize)、分页方法等,以简化在不同表格组件中的重复代码。
50 0
|
26天前
|
JavaScript 前端开发
react Or vue中引入animate.css
本文介绍了如何在React或Vue项目中引入animate.css库来使用动画效果,包括通过npm安装或在线链接引入,并展示了如何在React组件和Vue路由过渡中使用动画类。
36 0