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

  react中使用css的2种方式

 

  第二种:使用className

  以前写css定义类用的是class

  react中使用css的2种方式

    现在要用className

  react中使用css的2种方式

    

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

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

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

  react中使用css的2种方式

 

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

 react中使用css的2种方式

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

 let jsx = <div style={onlineBarStyle}>jsx123</div>;

 

 react中使用css的2种方式

 

相关文章:

  • 2021-07-07
  • 2022-12-23
  • 2021-09-17
  • 2021-12-29
  • 2021-04-01
  • 2021-12-07
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-09-25
  • 2022-12-23
  • 2020-06-28
  • 2021-08-11
相关资源
相似解决方案