首页  >  文章  >  web前端  >  react里面怎么写css

react里面怎么写css

藏色散人
藏色散人原创
2021-02-03 10:40:014815浏览

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

react里面怎么写css

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

react里面怎么写css样式?

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

1、基于class --(className)

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

<style>
.title{
    color:blue;
}
</style>
<div id=&#39;app&#39;></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为&#39;app&#39;的真实DOM之间
ReactDOM.render(<App/>,document.getElementById(&#39;app&#39;))

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

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

<div id=&#39;app&#39;></div>
class App extends React.Component{
    constructor(props){  
        super(peops)
    }
    render(){   
        return( 
    
         <div style={{color:&#39;red&#39;}}>hello 行间样式</div>
   
        )
    }
}
//将虚拟DOM以组件标签的形式渲染到id为&#39;app&#39;的真实DOM之间
ReactDOM.render(<App/>,document.getElementById(&#39;app&#39;))

3、原型链和全局变量

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

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

<div id=&#39;app&#39;></div>
//全局样式方法
var color={color:&#39;red&#39;}
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为&#39;app&#39;的真实DOM之间
ReactDOM.render(<App/>,document.getElementById(&#39;app&#39;))

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

推荐:《react视频教程

以上是react里面怎么写css的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn