react中如何引入css样式-木庄网络博客

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

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

本文环境：windows10、react16&&css3版本，Dell G3电脑。

（学习视频分享：react视频教程）

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

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

<div style={{width:'20px',height:'30px'}}>
    First Way!
</div>

2、声明样式：在render函数中先声明，再引用

render() {
    let mystyle = {
         width:'20px',
         height:'30px'
    }
 
    return(
        <div style={mystyle}>
            Second Way!
        </div>
    );
}

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

1	`requre('./mystyle.css');`

相关阅读 >>

css中id选择器和class选择器有何不同

css实现页面底部固定的方法介绍（附代码）

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

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » react中如何引入css样式

react中如何引入css样式

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论