Bei der Verwendung von React ist es üblich, Ihre Stile in einer globalen CSS-Datei zu speichern. Dies kann es schwierig machen, das Styling für bestimmte Komponenten zu finden, insbesondere wenn Sie an einem großen Projekt arbeiten. Bei Stilkomponenten ist es einfach, den Stil für eine bestimmte Komponente zu finden, da sie sich in derselben Datei wie die Komponente befinden.
Sehen wir uns an, wie Sie gestylte Komponenten in Ihrer React-Anwendung einrichten und integrieren.
Installieren der styled-components-Bibliothek
Sie können styled-components installieren, indem Sie diesen Befehl in Ihrem Terminal ausführen:
npm i styled-components
Um gestylte Komponenten mit Garn zu installieren, führen Sie Folgendes aus:
Garn fügen gestylte Komponenten hinzu
Erstellen einer gestylten Komponente
Eine gestylte Komponente ist genau wie eine Standard-React-Komponente mit Stilen. Es gibt verschiedene
Vor- und Nachteile von gestylten Komponenten, die für die korrekte Verwendung wichtig sind.Die allgemeine Syntax sieht folgendermaßen aus:
importieren gestylt aus"gestylte Komponenten";
konst Komponentenname = gestaltet. DOMElementTag`
cssProperty: cssWert
`
Hier importieren Sie gestylt von dem gestylte Komponente Bibliothek. Der gestylt Funktion ist eine interne Methode, die den JavaScript-Code in tatsächliches CSS konvertiert. Der Komponentenname ist der Name der formatierten Komponente. Der DOMElementTag ist das HTML/JSX-Element, das Sie formatieren möchten, z. B. div, span, button usw.
Um eine gestylte Schaltfläche mit einer gestylten Komponente zu erstellen, würden Sie zuerst eine React-Komponente erstellen, die ein Schaltflächenelement enthält.
So:
importieren Reagieren aus"reagieren";
FunktionTaste() {
zurückkehren (
Jetzt können Sie mithilfe von styled-components einen Stil für die Schaltfläche erstellen:
importieren gestylt aus"gestylte Komponenten";
konst StyledButton = styled.button`
Polsterung: 1Rest 0.8rem;
Grenzradius: 15Pixel;
Hintergrundfarbe: grau;
Farbe: #FFFFFF;
Schriftgröße: 15Pixel;
`
Wenn Sie alles zusammenfügen, müssen Sie die ersetzen Taste tag mit dem StyledButton Komponente:
importieren gestylt aus"gestylte Komponenten";
importieren Reagieren aus"reagieren";konst StyledButton = styled.button`
Polsterung: 1Rest 0.8rem;
Grenzradius: 15Pixel;
Hintergrundfarbe: grau;
Farbe: #FFFFFF;
Schriftgröße: 15Pixel;
`
FunktionTaste() {
zurückkehren (Willkommen!!!</StyledButton>
)
}
Verschachtelungsstile
Sie können Stile auch verschachteln, wenn Sie mit Stilkomponenten arbeiten. Das Verschachteln von gestylten Komponenten ist ein bisschen wie mit der SASS/SCSS-Erweiterungssprache. Sie können Stile verschachteln, wenn eine Komponente mehrere Element-Tags enthält und jedes Tag einzeln formatiert werden soll.
Zum Beispiel:
importieren Reagieren aus'reagieren';
FunktionApp() {
zurückkehren (Gestylte Komponenten</h1>
Willkommen bei styled-components</p>
</div>
)
}
Dieser Code erstellt eine Komponente, die eine enthält h1 Element und a P Element.
Sie können diese Elemente mit der verschachtelten Stilfunktion von gestalteten Komponenten gestalten:
importieren Reagieren aus'reagieren';
importieren gestylt aus'styled-components';konst StyledApp = styled.div`
Farbe: #333333;
Textausrichtung: Mitte;h1 {
Schriftgröße: 32Pixel;
Schriftstil: kursiv;
Schriftdicke: fett;
Buchstaben-Abstand: 1.2rem;
Texttransformation: Großbuchstaben;
}P {
Margin-Block-Start: 1rem;
Schriftgröße: 18Pixel;
}
`
FunktionApp() {
zurückkehren (Gestylte Komponenten</h1>
Willkommen bei styled-components</p>
</StyledApp>
)
}
Dieser Code verwendet eine formatierte Komponente und verschachtelt das Styling für die h1 Und P Stichworte.
Variablen erstellen und verwenden
Die Möglichkeit, Variablen zu erstellen, ist ein bemerkenswertes Merkmal der styled-components-Bibliothek. Diese Fähigkeit gewährt dynamisches Styling, bei dem Sie JavaScript-Variablen verwenden können, um Stile zu bestimmen.
Um Variablen in formatierten Komponenten zu verwenden, erstellen Sie eine Variable und weisen ihr einen CSS-Eigenschaftswert zu. Sie können diese Variable dann direkt in Ihrem CSS verwenden, zum Beispiel:
importieren gestylt aus"gestylte Komponenten";konst Hauptfarbe = "Rot";
konst Überschrift = styled.h1`
Farbe: ${Hauptfarbe};
`;
FunktionApp() {
zurückkehren (
<>Hallo Welt!</Heading>
</>
);
}
Im obigen Codeblock wird der Text „Hallo Welt!“ wird in der Farbe Rot angezeigt.
Beachten Sie, dass dieses Beispiel einfach eine Standard-JavaScript-Variable in einem Vorlagenliteral in Verbindung mit der formatierten Komponente verwendet. Es ist ein anderer Ansatz von Verwendung von CSS-Variablen.
Stile erweitern
Nachdem Sie eine gestaltete Komponente erstellt haben, verwenden Sie die Komponente. Möglicherweise möchten Sie in einigen Situationen subtile Unterschiede vornehmen oder mehr Styling hinzufügen. In solchen Fällen können Sie Stile erweitern.
Um Stile zu erweitern, umschließen Sie die mit Stil versehene Komponente in der gestylt () -Konstruktor und schließen Sie dann alle zusätzlichen Stile ein.
In diesem Beispiel ist die PrimaryButton Die Komponente erbt den Stil der Button-Komponente und fügt eine andere Hintergrundfarbe (Blau) hinzu.
importieren gestylt aus"gestylte Komponenten";
importieren Reagieren aus"reagieren";konst Button = styled.button`
Polsterung: 1Rest 0.8rem;
Grenzradius: 15Pixel;
Hintergrundfarbe: grau;
Farbe: #FFFFFF;
Schriftgröße: 15Pixel;
`konst PrimaryButton = gestylt (Schaltfläche)`
Hintergrundfarbe: blau;
`
FunktionApp() {
zurückkehren (
Sie können auch das Tag ändern, das eine mit Stil versehene Komponente rendert, indem Sie die verwenden als eine Requisite.
Der als prop ermöglicht es Ihnen, das zugrunde liegende HTML/JSX-Element anzugeben, als das die gestaltete Komponente gerendert wird.
Zum Beispiel:
importieren gestylt aus"gestylte Komponenten";
importieren Reagieren aus"reagieren";konst Button = styled.button`
Polsterung: 1Rest 0.8rem;
Grenzradius: 15Pixel;
Hintergrundfarbe: grau;
Farbe: #FFFFFF;
Schriftgröße: 15Pixel;
`
FunktionApp() {
zurückkehren (
Dieser Code rendert die Taste Komponente als A Element, Einstellung seiner href zuschreiben '#'.
Globale Stile erstellen
Gestylte Komponenten sind normalerweise auf eine Komponente beschränkt, sodass Sie sich vielleicht fragen, wie Sie die Anwendung als Ganzes gestalten können. Sie können die Anwendung mithilfe des globalen Stylings gestalten.
Styled-Components bietet a createGlobalStyle Funktion, mit der Sie Stile global deklarieren können. Der createGlobalStyle hebt die Einschränkung des komponentenbezogenen Stils auf und ermöglicht es Ihnen, Stile zu deklarieren, die für alle Komponenten gelten.
Um globale Stile zu erstellen, importieren Sie die createGlobalStyle Funktion und deklarieren Sie die gewünschten Stile.
Zum Beispiel:
importieren {createGlobalStyle} aus'styled-components';konst GlobalStyles = createGlobalStyle`
@importieren URL (' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');* {
Rand: 0;
Polsterung: 0;
Box-Größe: Border-Box;
}Körper {
Hintergrundfarbe: #343434;
Schriftgröße: 15Pixel;
Farbe: #FFFFFF;
Schriftfamilie: 'Montserrat', serifenlos;
}
`
ExportStandard GlobalStyles;
Dann importierst du die GlobalStyles Komponente in Ihre App-Komponente und rendern Sie sie. Rendern der GlobalStyles -Komponente in Ihrer App-Komponente wendet die Stile auf Ihre Anwendung an.
So:
importieren Reagieren aus'reagieren';
importieren GlobalStyles aus'./Global';
FunktionApp() {
zurückkehren (
</div>
)
}
Mehr zu Styled Components
Sie haben gelernt, wie Sie Stilkomponenten in Ihrer React-Anwendung einrichten, installieren und verwenden. Die styled-components-Bibliothek ist eine effiziente Möglichkeit, Ihre React-Anwendung zu stylen. Es bietet viele nützliche Funktionen, die Flexibilität beim Styling und dynamisches Styling ermöglichen.
Es gibt noch viel mehr zu gestylten Komponenten, wie z. B. Animationen, und React ist ein großes Framework, bei dem es darüber hinaus noch viel zu lernen gibt.
