Detaillierte Erläuterung der DOM-Stileinstellungen in vier Reaktionskomponenten

1. Inline-Stile

Um Inline-Stile zum virtuellen DOM hinzuzufügen, müssen Sie einen Ausdruck verwenden, um ein Stilobjekt zu übergeben. Um Inline-Stile zu implementieren, müssen Sie ein Stilobjekt schreiben, und dieses Stilobjekt kann an vielen Stellen platziert werden, z. B.: in der render , im Komponentenprototyp, in einer externen JS-Datei
Hinweis: Hier gibt es zwei Klammern. Die erste zeigt an, dass wir JS in JSX einfügen, und die zweite ist die Klammer des Objekts.

<p style={{color:'red', fontSize:'14px'}}>Hallo Welt</p>

2. Klasse verwenden

React empfiehlt die Verwendung von Inline-Stilen, da React jede Komponente als unabhängige Einheit betrachtet.

Tatsächlich fügen wir in den meisten Fällen immer noch viele Klassennamen zu Elementen hinzu, es sollte jedoch beachtet werden, dass class als className geschrieben werden muss (denn schließlich schreiben wir js-ähnlichen Code und erhalten js-Regeln, und class ist ein Schlüsselwort).

importiere React, {Komponente} von 'react'
1. Extern definierte Stile importieren. Stile aus „./style.css“ importieren.

Klasse ClassStyle erweitert Komponente {
  rendern() {
    // js-Logik let className = cx({
      Schriftart: false
    })
    zurückkehren (
      <>
        <div className={className}>hallo</div>
        <p className='setstyle'>Stil</p>
        <DivContainer>
          Welt
        </DivContainer>
      <>
    )
  }
}

Standard-Klassenstil exportieren

3. Fügen Sie unterschiedliche Stile für unterschiedliche Klassennamenbedingungen hinzu

Manchmal müssen Sie basierend auf unterschiedlichen Bedingungen unterschiedliche Stile hinzufügen, z. B. je nach Abschlussstatus: „Abgeschlossen“ ist grün, „Unvollendet“ ist rot. In diesem Fall empfehlen wir die Verwendung des Classnames-Pakets:
Zweck:
Da React Native dynamisch mehrere Klassennamen hinzufügt, wird ein Fehler gemeldet

Stil aus „./style.css“ importieren
<div Klassenname={Stil.Klasse1 Stil.Klasse2}</div>

Der endgültige Rendering-Effekt ist:

<div Klasse = 'Klasse1 Klasse2'></div>

Herunterladen und installieren

npm i -S Klassennamen

verwenden

Klassennamen aus „Klassennamen“ importieren
<div Klassenname=Klassennamen({
    'Klasse1': wahr,
    'Klasse2': wahr
    )>
</div>

4. CSS in JS

styled-components ist ein CSS-in-JS-Framework, das für React geschrieben wurde. Einfach ausgedrückt bedeutet es, CSS in JS zu schreiben. NPM-Link

• Herkömmliche Front-End-Lösungen befürworten das Prinzip der „Trennung der Belange“. HTML, CSS und JavaScript sollten ihre jeweiligen Funktionen erfüllen und getrennt sein.
• Im React-Projekt werden komponentenbasierte Lösungen stärker befürwortet, die auf natürliche Weise eine Möglichkeit bieten, HTML, CSS und JavaScript zentral zu schreiben und zu verwalten.

styled-components ist wahrscheinlich die beliebteste Bibliothek für CSS-in-JS. Mit styled-components können Sie die Tag-Template-String-Syntax von ES6 verwenden, um eine Reihe von CSS-Eigenschaften für die Komponente zu definieren, die gestaltet werden muss. Wenn der JS-Code der Komponente analysiert und ausgeführt wird, generiert styled-components dynamisch einen CSS-Selektor und fügt den entsprechenden CSS-Stil in Form eines Style-Tags in das Head-Tag ein. Dynamisch generierte CSS-Selektoren verfügen über einen kleinen Hash-Wert, um globale Eindeutigkeit sicherzustellen und Stilkonflikte zu vermeiden.

1. Installation

npm i -S gestaltete Komponenten

Stile definieren
2. Stylen Sie die JS-Datei

Importieren Sie Stile aus „Stilkomponenten“.
const Titel = styled.div`
    Farbe: rot;
    Schriftgröße: 16px;
    h3{
        Farbe: blau;
        Schriftgröße: 20px;
    }
`
exportieren {
    Titel
}

Zeigen Sie es genauso an, wie Sie es mit einem regulären React-Element tun würden, indem Sie den Titel verwenden.

importiere React, {Komponente} von 'react'
importiere { Titel } ​​aus './Styles'
Klasse App erweitert Komponente {
rendern() {
    zurückkehren (
        <div>
            <Titel>
            Ich bin nur ein Titel <h3>Hallo Welt</h3>
            </Titel>
        </div>
        );
    }
}
Standard-App exportieren

3. Stilvererbungsstil

Importieren Sie Stile aus „Stilkomponenten“.
const Button = styled.button`
    Schriftgröße: 20px;
    Rand: 1px durchgehend rot;
    Rahmenradius: 3px;
`;

// Eine neue Komponente, die Button erbt und einige Stile überschreibt const Button2 = styled(Button)`
    Farbe: blau;
    Rahmenfarbe: gelb;
`;

exportieren {
    Taste,
    Taste2
}

zeigen

importiere React, {Komponente} von 'react'
importieren {
Taste,
Taste2
} von './Styles'
Klasse App erweitert Komponente {
rendern() {
    zurückkehren (
    <div>
        <Button>Ich bin ein Button 1</Button>
        <Button2>Ich bin ein Button 2</Button2>
    </div>
    );
}
}
Standard-App exportieren

4. Attributübertragungsstil

Importieren Sie Stile aus „Stilkomponenten“.
const Input = styled.input`
    Farbe: ${props => props.inputColor || "blau"};
    Rahmenradius: 3px;
`;
exportieren {
    Eingang
}

zeigen

importiere React, {Komponente} von 'react'
importiere { Input } aus './Styles'
Klasse App erweitert Komponente {
rendern() {
    zurückkehren (
    <div>
        <Input defaultValue="Hallo" inputColor="red"></Input>
    </div>
    );
}
}
Standard-App exportieren

Dies ist das Ende dieses Artikels zum Festlegen von DOM-Stilen in vier Reaktionskomponenten. Weitere relevante Inhalte zu DOM-Stilen für Reaktionskomponenten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!