react裡面怎麼寫css

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元素加入樣式

<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中文網其他相關文章！