react中如何使用css?

react中如何使用css?下面本篇文章给大家介绍一下react中使用css的2种方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

react中使用css的2种方式

第一种:行内样式,直接写在 style={{}} 中即可 , 最外层{}表示是一个表达式,里面的{}表示是一个对象

1.png

第二种:使用className

以前写css定义类用的是class

2.png

现在要用className

3.png

那为何在react的jsx语法中不能直接使用class定义css类呢,

因为react把class关键字用来定义组件类名了,所以用className来代替

比如下图,这里表示用class关键字声明了一个ChildWork组件

4.png

补充:还有一种写法,但不推荐,把样式写在一个对象中,并赋值给一个变量,注意这里样式要用小驼峰

5.png

然后直接在html标签上用style={}的方式引用,注意这里只有一对{}

更多web前端知识,请查阅 HTML中文网 !!

以上就是react中如何使用css?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏