So führen Sie CSS-Stile in React ein

So führen Sie den CSS-Stil in React ein: Deklarieren Sie zuerst den Stil in der Renderfunktion, z. B. [render() {let mystyle = {}}], und zitieren Sie dann den Stil, z. B. [return(be5ba5a6e048cf000137128caf9cd9f316b28748ea4df4d9c2150843fecfba68);].

Die Umgebung dieses Artikels: Windows 10, React16 und CSS3-Version, Dell G3-Computer.

(Lernvideo-Sharing: React-Video-Tutorial)

React bietet drei Möglichkeiten, CSS-Stile einzuführen:

1. Inline-Stil: direkt innerhalb der Komponente definiert

<div style={{width:&#39;20px&#39;,height:&#39;30px&#39;}}>
    First Way!
</div>

2. Deklarationsstil: zuerst im Rendering deklarieren Funktion, dann zitieren

render() {
    let mystyle = {
         width:'20px',
         height:'30px'
    }

    return(
        <div style={mystyle}>
            Second Way!
        </div>
    );
}

3. Stile einführen: Externe CSS-Dateien sind normale CSS-Dateien. Verwenden Sie die folgende Anweisung nach der Importanweisung in der Komponente js.

requre('./mystyle.css');

Verwandte Empfehlungen: JS-Tutorial

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