react中如何引入css样式


本文摘自PHP中文网,作者V,侵删。

react中引入css样式的方法:首先在render函数中声明样式,如【render() {let mystyle = {}}】;然后引用样式即可,如【return(<div style={mystyle}></div>);】。

本文环境:windows10、react16&&css3版本,Dell G3电脑。

(学习视频分享:react视频教程)

react有三种方法可以引入css样式:

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

1

2

3

<div style={{width:'20px',height:'30px'}}>

    First Way!

</div>

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

1

2

3

4

5

6

7

8

9

10

11

12

render() {

    let mystyle = {

         width:'20px',

         height:'30px'

    }

 

    return(

        <div style={mystyle}>

            Second Way!

        </div>

    );

}

3、引入样式:引入外部的css文件,外部的css文件就是普通的css,在组件js中的import语句后面使用如下语句。

1

requre('./mystyle.css');

相关推荐:js教程

以上就是react中如何引入css样式的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

如何设置css作用域

css 搜索框怎么变大

在css中字体加粗要怎么做?

css换行代码是什么

css中的文本属性有哪些

css怎么绘制斜线

css如何设置图片不重复

css实现快速回到顶部效果

html以及css的常用用法

css怎么显示滚动条

更多相关阅读请进入《React》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...