Kann reagieren, CSS einführen?

React kann CSS einführen: 1. Verwenden Sie „style={{css style}}“ direkt in der Komponente, um CSS einzuführen. 2. Deklarieren Sie zunächst eine Variable in der Renderfunktion, um das Stylesheet zu speichern und an das zu binden style-Attribut und verweisen Sie dann darauf ;3. Verwenden Sie „import ‚css path‘“, um die CSS-Datei einzuführen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, React16-Version. Diese Methode ist für alle Computermarken geeignet.

Empfohlenes Lernen: „Programmiervideo“

Css kann in React eingeführt werden. Wenn Sie den Inline-Stil jedoch direkt auf die folgende Weise schreiben, wird direkt ein Fehler gemeldet, da die JSX-Syntax nicht unterstützt wird.

<div style="color:red">测试数据</div> //报错

React unterstützt die folgenden drei Methoden zum Schreiben von CSS: [Verwandte Tutorial-Empfehlungen: React-Video-Tutorial]

1. Inline-Stil: direkt in der Komponente definiert

...
<div style={{
    width:&#39;200px&#39;,
    height:&#39;80px&#39;,
    backgroundColor:&#39;yellow&#39;,    　　　　
    fontSize:&#39;24px&#39;,    　　　　
    textAlign:&#39;center&#39;   　　　　
}}>测试数据</div>
...

2. Deklarationsstil: im Rendering Funktion Zuerst deklarieren und dann zitieren

Der deklarierte Stil ähnelt dem Inline-Stil. Der einzige Unterschied besteht darin, dass eine Variable zum Speichern des Stylesheets deklariert und an das Stilattribut gebunden wird.

render() {
    let mystyle = {
         width:'200px',
		 height:'80px',
		 backgroundColor:'yellow',    　　　　
		 fontSize:'24px',    　　　　
		 textAlign:'center'   　
    }
    return(
        <div style={mystyle}>
            测试数据
        </div>
    );
}

3. Verwenden Sie den Import, um externe CSS-Stildateien einzuführen. Eine React-Komponente ist im Allgemeinen ein Ordner, der die entsprechenden JS- und CSS-Dateien enthält.

import './mystyle.css';

Wenn Sie weitere verwandte Artikel lesen möchten, besuchen Sie bitte die

Chinesische PHP-Website

! !

Das obige ist der detaillierte Inhalt vonKann reagieren, CSS einführen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!