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='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)
Facebook主張的是行間樣式，直接為對應的DOM元素加入style屬性，遵循react的規則，寫在{ }當中。
<div id='app'></div>
class App extends React.Component{
constructor(props){
super(peops)
}
render(){
return(
<div style={{color:'red'}}>hello 行间样式</div>
)
}
}
//将虚拟DOM以组件标签的形式渲染到id为'app'的真实DOM之间
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樣式的三種方式，有什麼遺漏或不正確的地方歡迎大家指正。
推薦：《react影片教學》
以上是react裡面怎麼寫css的詳細內容。更多資訊請關注PHP中文網其他相關文章！
