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';
相关文章
|
2天前
|
前端开发
|
2天前
|
Android开发
jmessage-react-plugin的正确引入方法
jmessage-react-plugin的正确引入方法
6 1
|
6天前
|
前端开发 容器
CSS 中几种常用的换行方法
CSS 中几种常用的换行方法
14 1
|
19天前
|
前端开发
React 使用 CSS 样式
在 React 应用程序中使用 CSS 有多种方法。 以下是一些常见的方式以及如何在 React 中实现这些方法的详细说明。
23 4
|
19天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
10 2
|
1天前
|
前端开发 UED
css性能优化的方法
css性能优化的方法
9 0
|
9天前
|
前端开发
CSS绘制三角形的方法
CSS绘制三角形的方法
|
22天前
封装react-antd-table组件参数以及方法如rowSelection、pageNum、pageSize、分页方法等等
文章介绍了如何封装React-Antd的Table组件,包括参数和方法,如行选择(rowSelection)、页码(pageNum)、页面大小(pageSize)、分页方法等,以简化在不同表格组件中的重复代码。
50 0
|
23天前
|
JavaScript 前端开发
react Or vue中引入animate.css
本文介绍了如何在React或Vue项目中引入animate.css库来使用动画效果,包括通过npm安装或在线链接引入,并展示了如何在React组件和Vue路由过渡中使用动画类。
34 0
|
前端开发
react的css样式
react的css样式
109 0