React verwendet Emotionen zum Schreiben von CSS-Code

Einführung:

Emotion ist eine JavaScript-Bibliothek. Mit Emotion können Sie CSS-Code auf die gleiche Weise schreiben wie JS. Nachdem Sie Emotionen in React installiert haben, können Sie CSS einfach kapseln und wiederverwenden. Nach der Verwendung von Emotionen werden die vom Browser gerenderten Tags mit einem Logo versehen, das mit CSS beginnt. Wie folgt: Die Tags, die im Screenshot mit css- beginnen, werden mithilfe der Emotion-Bibliothek gerendert.

Im Folgenden wird die Anwendung von Emotionen in der Technik von der Installation bis zur Nutzung vorgestellt.

Installation von Emotion:

Garn hinzufügen @emotion/reagieren
Garn hinzufügen @emotion/styled

Fügen Sie allgemeine CSS-Komponenten hinzu:

1. Nennen Sie den gleichen Namen wie die Komponente, beginnend mit einem Großbuchstaben
2. Auf Styled folgt der HTML-Tag

// Emotionen einbringen
importiere Stil aus „@emotion/styled“;

// Erstellen Sie eine CSS-Komponente mit Emotion const Container = styled.div`
Anzeige: Flex;
Flex-Richtung: Spalte;
Elemente ausrichten: zentrieren;
Mindesthöhe: 100vh;
`;

//CSS-Komponenten im HTML-Code verwenden:
<Behälter>
//HTML-Code</Container>

So fügen Sie einer vorhandenen Komponente Stile hinzu:

1. Schreiben Sie den ersten Buchstaben des Variablennamens groß
2. Übergeben Sie die vorhandene Komponente als Parameter an styled
3. Stilcode kann Parameter hinzufügen

// Card ist eine vorhandene Komponente von antd const ShadowCard = styled(Card)`
    Breite: 40rem;
    Mindesthöhe: 56rem;
    Polsterung: 3,2rem 4rem;
    Randradius: 0,3rem;
    Box-Größe: Rahmenbox;
    Kastenschatten: rgba(0, 0, 0, 0,1) 0 0 10px;
    Textausrichtung: zentriert;
`;

// Importiertes Bild, wird direkt als Parameter verwendet. Importiere Logo aus „assets/logo.svg“;

// Backticks können sich auf den im Parameter const Header = styled.header` übergebenen Magic String beziehen.
Hintergrund: URL (${logo}) keine Wiederholung Mitte;
Polsterung: 5rem 0;
Hintergrundgröße: 8rem;
Breite: 100 %;
`;

Extrahieren allgemeiner CSS-Komponenten

1. Vor dem Backquote sollten alle möglichen Parameter aufgelistet werden, die zum Empfang generischer Parameter verwendet werden können.
2. Holen Sie sich die übergebenen Parameter und verwenden Sie Requisiten, um sie abzurufen, z. B. props.between. Sie können den Funktionsrückgabewert verwenden, um das CSS-Attribut zuzuweisen. Das CSS-Attribut wird nicht gerendert und der Rückgabewert ist undefiniert

Inhalt ausrichten: ${(props) => (props.between ? "space-between" : nicht definiert)};

3. Sie können CSS-Selektor verwenden
4. Verwenden Sie es beim Aufruf wie eine normale JS-Komponente und übergeben Sie dieselben Parameter

//Row-Komponente aufrufen <HeaderLeft gap={1}> 
//HTML-Code</HeaderLeft>
const HeaderLeft = gestylt(Zeile)``;


// Definieren Sie die Row-Komponente export const Row = styled.div<{
  Lücke?: Zahl | Boolesch;
  zwischen?: Boolesch;
  Rand unten?: Zahl;
}>`
Anzeige: Flex;
Elemente ausrichten: zentrieren;
Inhalt ausrichten: ${(props) => (props.between ? "space-between" : nicht definiert)};

Rand unten: ${(Requisiten) =>

props.marginBottom? props.marginBottom + "px" : nicht definiert};

> * {
Rand oben: 0 !wichtig;
Rand unten: 0 !wichtig;
Rand rechts: ${(Requisiten) =>

Typ der Requisiten.Lücke === "Zahl"
    ? props.gap + "rem"
    : Requisiten.Lücke
    ? "2rem"
    : undefiniert};
}
`;

Schreiben Sie Inline-Stile für Emotionen

1. Schreiben Sie den folgenden Code oben in die Komponente, um die aktuelle Komponente anzuweisen, den Emotion-Inline-Stil zu verwenden

/* @jsxImportSource @emotion/reagieren */

2. Inline-Stilformat: css={ /* Inline-Stilcode*/ }

<Formular css={{ marginBottom: "2rem" }} layout={"inline"}>
// HTML-Code</Form>

Das Obige ist die Einführung und Verwendung von Emotionen. (#^.^#)

Oben sind die Details, wie React Emotionen verwendet, um CSS-Code zu schreiben. Weitere Informationen dazu, wie React Emotionen verwendet, um CSS-Code zu schreiben, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!