Wie schreibe ich CSS in React

So schreiben Sie CSS in React: 1. Fügen Sie Stile zum DOM-Element des Klassennamens über className hinzu. 2. Fügen Sie Stilattribute direkt zu den entsprechenden DOM-Elementen hinzu. 3. Definieren Sie ein CSS, indem Sie den Stil globaler Variablen definieren.

Die Betriebsumgebung dieses Artikels: Windows7-System, React17.0.1 und CSS3-Version, Dell G3-Computer.

Wie schreibe ich den CSS-Stil in React?

In der Grundsyntax von JSX gibt es drei Hauptmethoden zum Schreiben von CSS-Stilen in React

1 Basierend auf der Klasse – (className)

Basierend auf dem Klassennamen, fügen Sie Stile zum DOM-Element der Klasse hinzu Benennen Sie den Stil über className

<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. Basierend auf innerem CSS (der von Facebook empfohlenen Methode) Interline-Stil (JSON)

Facebook befürwortet den Interline-Stil und fügt Stilattribute direkt zu den entsprechenden DOM-Elementen hinzu und folgt dabei den Reaktionsregeln. und schreibe es in { }.

<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. Prototypenkette und globale Variablen

Sie können einen CSS-Stil definieren, indem Sie globale Variablen definieren, und die DOM-Elemente, die für diesen Stil gelten, können direkt aufgerufen werden.

Sie müssen auf die Position des Hinzufügens von Stilen in der Prototypenkette achten. Wenn Sie dies aufrufen, verweist dies auf die Komponente.

<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;))

Die oben genannten Möglichkeiten sind drei Möglichkeiten, CSS-Stile in React zu schreiben Fehler, bitte korrigieren Sie mich.

Empfohlen: „Video-Tutorial reagieren“

Das obige ist der detaillierte Inhalt vonWie schreibe ich CSS in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!