react里面怎么写css

PHP中文网 • 2025年3月7日 22:10:57 • 编程技术 • 阅读 2

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元素添加样式

.title{    color:blue;}
//创建一个叫App类，继承（extends)了react中创建组件的方法(component)class App extends React.Component{    constructor(props){          super(peops)    }    render(){   //类里面负责构建HTML的位置，render渲染        return(  //返回HTML结构        高版本
                )    }}//将虚拟DOM以组件标签的形式渲染到id为'app'的真实DOM之间ReactDOM.render(,document.getElementById('app'))

登录后复制

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

Facebook主张的是行间样式，直接给对应的DOM元素添加style属性，遵循react的规则，写在{ }当中。


class App extends React.Component{    constructor(props){          super(peops)    }    render(){           return(              hello 行间样式
           )    }}//将虚拟DOM以组件标签的形式渲染到id为'app'的真实DOM之间ReactDOM.render(,document.getElementById('app'))

登录后复制

3、原型链和全局变量

可以通过定义全局变量的方法来定义一个css样式，适用该样式的DOM元素可直接调用。

原型链中需要注意添加样式的位置，调用时通过this，this指向该组件


//全局样式方法var color={color:'red'}class App extends React.Component{    constructor(props){          super(peops)    }    render(){           return(          react全局行间样式
         //this 指向组件本身         原型样式
        )    }}//原型链样式的写法，在创建完以及渲染中间的位置添加原型上的样式App.prototype.col={    color:pink  }//将虚拟DOM以组件标签的形式渲染到id为'app'的真实DOM之间ReactDOM.render(,document.getElementById('app'))

登录后复制

以上是react中写css样式的三种方式，有什么遗漏或者不正确的地方欢迎大家指正。