react如何引入css
导读:收集整理的这篇文章主要介绍了react如何引入css,觉得挺不错的,现在分享给大家,也给大家做个参考。引入方法有:1、行内样式;2、声明样式,行内样式类似,区别只是声明一个变量保存样式表绑定给style属性;3、import引入,React...
收集整理的这篇文章主要介绍了react如何引入css,觉得挺不错的,现在分享给大家,也给大家做个参考。引入方法有:1、行内样式;2、声明样式,行内样式类似,区别只是声明一个变量保存样式表绑定给style属性;3、import引入,React组件一般是一个文件夹,文件夹里包含对应的js和css,只要在js中引入同级的css即可。
本教程操作环境:windows7系统、CSS3& & HTML5版、Dell G3电脑。
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';
推荐学习:css视频教程
以上就是react如何引入css的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: react如何引入css
本文地址: https://pptw.com/jishu/589517.html