react里面怎么写css


本文摘自PHP中文网,作者藏色散人,侵删。

react里面写css的方法:1、通过className在style中给该class名的DOM元素添加样式;2、直接给对应的DOM元素添加style属性;3、通过定义全局变量的方法来定义一个css样式。

本文操作环境:windows7系统、react17.0.1&&css3版本、Dell G3电脑。

react里面怎么写css样式?

JSX基本语法中关于react如何写css样式主要有三种方法

1、基于class --(className)

基于className ,通过className在style中给该class名的DOM元素添加样式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<style>

.title{

    color:blue;

}

</style>

<div id='app'></div>

//创建一个叫App类,继承(extends)了react中创建组件的方法(component)

class App extends React.Component{

    constructor(props){ 

        super(peops)

    }

    render(){   //类里面负责构建HTML的位置,render渲染

        return//返回HTML结构

        <div  className="title">高版本</div>

         

        )

    }

}

//将虚拟DOM以组件标签的形式渲染到id为'app'的真实DOM之间

ReactDOM.render(<App/>,document.getElementById('app'))

2、基于inner css (facebook 主张的方式) 行间样式(json)

阅读剩余部分

相关阅读 >>

React fabric是什么

React如何引入css

React开发框架有哪些?

值得了解的6大React组件文档化工具(推荐收藏)

React中怎么获取数据

使用React native的好处是什么?

React中如何引进图片

React中的refs是什么

React native是什么

React组件拆分的重要性

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




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...