Rumah > hujung hadapan web > tutorial js > react可以引入css吗?

react可以引入css吗?

青灯夜游
Lepaskan: 2020-12-04 09:51:41
asal
2463 orang telah melayarinya

react可以引入css,方法:1、直接在组件内部使用“style={{css样式}}”来引入css;2、render函数中先声明一个变量保存样式表绑定给style属性,然后引用;3、使用“import 'css路径'”引入css文件。

react可以引入css吗?

本教程操作环境:windows7系统、react16版,该方法适用于所有品牌电脑。

推荐学习:《编程视频

在React中是可以引入css的。但,如果直接按下面的方式写内联样式会直接报错,因为JSX语法不支持。

<div style="color:red">测试数据</div> //报错
Salin selepas log masuk

React支持以下三种写css的方法:【相关教程推荐:React视频教程

1、行内样式:直接在组件内部定义

...
<div style={{
    width:&#39;200px&#39;,
    height:&#39;80px&#39;,
    backgroundColor:&#39;yellow&#39;,        
    fontSize:&#39;24px&#39;,        
    textAlign:&#39;center&#39;       
}}>测试数据</div>
...
Salin selepas log masuk

2、声明样式:在render函数中先声明,再引用

声明样式和行内样式类似,区别只是声明一个变量保存样式表绑定给style属性。

render() {
    let mystyle = {
         width:&#39;200px&#39;,
		 height:&#39;80px&#39;,
		 backgroundColor:&#39;yellow&#39;,        
		 fontSize:&#39;24px&#39;,        
		 textAlign:&#39;center&#39;    
    }
    return(
        <div style={mystyle}>
            测试数据
        </div>
    );
}
Salin selepas log masuk

3、使用import引入外部的css样式文件

一个React组件一般就是一个文件夹,文件夹里包含对应的js和css,只要在js中引入同级的css即可。

import &#39;./mystyle.css&#39;;
Salin selepas log masuk

想要查阅更多相关文章,请访问PHP中文网!!

Atas ialah kandungan terperinci react可以引入css吗?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan