react可以引入css吗?
程序员文章站
2022-03-23 11:46:25
...
react可以引入css,方法:1、直接在组件内部使用“style={{css样式}}”来引入css;2、render函数中先声明一个变量保存样式表绑定给style属性,然后引用;3、使用“import 'css路径'”引入css文件。
本教程操作环境:windows7系统、react16版,该方法适用于所有品牌电脑。
推荐学习:《编程视频》
在React中是可以引入css的。但,如果直接按下面的方式写内联样式会直接报错,因为JSX语法不支持。
<div style="color:red">测试数据</div> //报错
React支持以下三种写css的方法:【相关教程推荐:React视频教程】
1、行内样式:直接在组件内部定义
... <div style={{ width:'200px', height:'80px', backgroundColor:'yellow', fontSize:'24px', textAlign:'center' }}>测试数据</div> ...
2、声明样式:在render函数中先声明,再引用
声明样式和行内样式类似,区别只是声明一个变量保存样式表绑定给style属性。
render() { let mystyle = { width:'200px', height:'80px', backgroundColor:'yellow', fontSize:'24px', textAlign:'center' } return( <div style={mystyle}> 测试数据 </div> ); }
3、使用import引入外部的css样式文件
一个React组件一般就是一个文件夹,文件夹里包含对应的js和css,只要在js中引入同级的css即可。
import './mystyle.css';
想要查阅更多相关文章,请访问PHP中文网!!
以上就是react可以引入css吗?的详细内容,更多请关注其它相关文章!
上一篇: 详解PHP死循环写法和作用
推荐阅读
-
发现一个特效会让你有意思,有人知道这个用css可以做出来吗,怎么做?_html/css_WEB-ITnose
-
Drupal, Html, PHP and CSS从来没用过,初学,一周以后可以胜任工作吗?该如何解决
-
可以使text显示为label的样式吗_html/css_WEB-ITnose
-
HTML框架有什么用?没有可以吗?例bootstrap_html/css_WEB-ITnose
-
表单元素的值可以为布尔型吗?_html/css_WEB-ITnose
-
有什么办法可以让DIV遮住控件中的光标吗?_html/css_WEB-ITnose
-
可以使页面在用户后退到自身时执行某个function吗?_html/css_WEB-ITnose
-
表单元素的值可以为布尔型吗?_html/css_WEB-ITnose
-
HTML框架有什么用?没有可以吗?例bootstrap_html/css_WEB-ITnose
-
wordpress中的wp_die()输出提示中的css样式可以修改吗?(代码中直接使用