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中怎么写css样式？的相关教程结束。