欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react中怎么写css样式?

程序员文章站 2022-03-14 13:45:03
JSX基本语法中关于react如何写css样式主要有三种方法 1、基于class --(className) 基于className ,通过className在style中给该class名的DOM元素添加样式 2、基于inner css (facebook 主张的方式) 行间样式(json) Fac ......

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

1、基于class --(classname)

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

 1 <style>
 2 .title{
 3     color:blue;
 4 }
 5 </style>
 6 
 7 
 8 <div id='app'></div>
 9 //创建一个叫app类,继承(extends)了react中创建组件的方法(component)
10 class app extends react.component{
11     constructor(props){  
12         super(peops)
13     }
14     render(){   //类里面负责构建html的位置,render渲染
15         return(  //返回html结构
16         <div  classname="title">高版本</div>
17         
18         )
19     }
20 }
21 
22 //将虚拟dom以组件标签的形式渲染到id为'app'的真实dom之间
23 reactdom.render(<app/>,document.getelementbyid('app'))

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

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

 1 <div id='app'></div>
 2 
 3 class app extends react.component{
 4     constructor(props){  
 5         super(peops)
 6     }
 7     render(){   
 8         return( 
 9     
10          <div style={{color:'red'}}>hello 行间样式</div>
11    
12         )
13     }
14 }
15 
16 //将虚拟dom以组件标签的形式渲染到id为'app'的真实dom之间
17 reactdom.render(<app/>,document.getelementbyid('app'))

3、原型链和全局变量

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

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

<div id='app'></div>
//全局样式方法
var color={color:'red'}

class app extends react.component{
    constructor(props){  
        super(peops)
    }
    render(){   
        return( 
         <div style={color}>react全局行间样式</div>
         //this 指向组件本身
         <div style={this.col}>原型样式</div>
        )
    }
}
//原型链样式的写法,在创建完以及渲染中间的位置添加原型上的样式
app.prototype.col={
    color:pink  
}

//将虚拟dom以组件标签的形式渲染到id为'app'的真实dom之间
reactdom.render(<app/>,document.getelementbyid('app'))

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