So fügen Sie Stile hinzu, um Komponenten zu reagieren

So fügen Sie Stile zu Reaktionskomponenten hinzu: 1. Durch Übergabe des Stilobjekts durch Ausdrücke; 2. Durch die Verwendung von Inline-Stilen. 3. Durch Definieren von Klassennamen durch Pakete von Drittanbietern Stil.

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

Vier Möglichkeiten, Stile zu React-Komponenten hinzuzufügen:

DOM-Stile in Komponenten

Der erste: Inline-Stile

Wenn Sie dem virtuellen Dom Inline-Stile hinzufügen möchten, müssen Sie einen Ausdruck verwenden, um den zu übergeben Stilobjekt:

// 注意这里的两个括号，第一个表示我们在要JSX里插入JS了，第二个是对象的括号
 <p style={{color:&#39;red&#39;, fontSize:&#39;14px&#39;}}>Hello world</p>

Inline-Stil erfordert das Schreiben eines Stilobjekts, und der Speicherort dieses Stilobjekts kann an vielen Stellen platziert werden, z. B. in der Renderfunktion, im Komponentenprototyp oder in der externen Link-JS-Datei

Zweitens Typ: Klassenname (externe Referenz)

React empfiehlt die Verwendung von Inline-Stilen, da React davon ausgeht, dass jede Komponente ein unabhängiges Ganzes ist

Tatsächlich fügen wir in den meisten Fällen immer noch eine große Anzahl von Klassennamen zu Elementen hinzu, aber das sollte so sein Beachten Sie, dass die Klasse als Klassenname geschrieben werden muss (denn schließlich schreiben Sie js-ähnlichen Code und werden durch js-Regeln eingeschränkt, und die Klasse ist ein Schlüsselwort)

<p className="hello" style = {this.style}>Hello world</p>

Der dritte Typ: Klassenname/Klassennamen dritter- Party-Paket-Definitionsklassenname

Manchmal müssen Sie je nach Bedingung verschiedene Stile hinzufügen, zum Beispiel: abgeschlossener Status, abgeschlossen ist grün, unvollendet ist rot. In diesem Fall empfehlen wir die Verwendung des Pakets classname/classnames:

<p
    className = { 
        classname({
            size: true,
            bg: true
        })
    }
> 第三包classname定义 </p>

Der vierte Typ: gestaltete Komponenten (styled-components)

styled-components ist ein CSS-in-JS-Framework, das für React geschrieben wurde Es ist einfach, CSS in JS zu schreiben. npm link

styled-components ist ein Drittanbieterpaket, es muss installiert werden

const Container = styled.div`
    width: 100px;
    height: 100px;
    background: pink;
    color: white;
`

Das obige ist der detaillierte Inhalt vonSo fügen Sie Stile hinzu, um Komponenten zu reagieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!