So führen Sie CSS in React ein

Einführungsmethoden umfassen: 1. Inline-Stil; 2. Deklarationsstil, Inline-Stil ist ähnlich, der Unterschied besteht darin, dass eine Variable zum Speichern des Stylesheets deklariert und an das Stilattribut gebunden wird. 3. Importeinführung, die React-Komponente Im Allgemeinen ein Ordner. Der Ordner enthält die entsprechenden JS und CSS. Führen Sie einfach CSS auf derselben Ebene in JS ein.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

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

Wenn Sie in React Inline-Stile direkt auf die oben beschriebene Weise schreiben, wird ein Fehler direkt gemeldet, da die JSX-Syntax die folgenden drei Methoden zum Schreiben von CSS nicht unterstützt:

1

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

2 .Deklarierter Stil

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.

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

3.import-Einführung

Eine React-Komponente ist im Allgemeinen ein Ordner, der das entsprechende JS und CSS enthält. Führen Sie einfach CSS derselben Ebene in das JS ein.

import './mystyle.css';

Empfohlenes Lernen:

CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo führen Sie CSS in React ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!