So verwenden Sie gestylte Komponenten in React

Bei 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:

yarn add styled-components


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 richtige Verwendung wichtig sind.

Die allgemeine Syntax sieht folgendermaßen aus:

import styled from "styled-components";


const ComponentName = styled.DOMElementTag`
    cssProperty: cssValue
`


Hier importieren Sie Stile aus der Stilkomponentenbibliothek . Die formatierte Funktion ist eine interne Methode, die den JavaScript-Code in tatsächliches CSS umwandelt. Der ComponentName ist der Name der gestalteten Komponente. Das 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:

import React from "react";


function Button() {
    return (
        <button>Welcome!!!</button>
    )
}


Jetzt können Sie mithilfe von styled-components einen Stil für die Schaltfläche erstellen:

import styled from "styled-components";


const StyledButton = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

Wenn Sie alles zusammenfügen, müssen Sie das Button -Tag durch die StyledButton- Komponente ersetzen:

import styled from "styled-components";
import React from "react";


const StyledButton = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

function Button() {
    return (
        <StyledButton>Welcome!!!</StyledButton>
    )
}


Verschachtelungsstile

Sie können Stile auch verschachteln, wenn Sie mit Stilkomponenten arbeiten. Das Verschachteln von Stilkomponenten ist ein bisschen wie die Verwendung 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:

import React from 'react';


function App() {
    return (
        <div>
            <h1>Styled Components</h1>
            <p>Welcome to styled-components</p>
        </div>
    )
}


Dieser Code erstellt eine Komponente, die ein h1- Element und ein p- Element enthält.

Sie können diese Elemente mit der verschachtelten Stilfunktion von gestalteten Komponenten gestalten:

import React from 'react';
import styled from 'styled-components';


const StyledApp = styled.div`
    color: #333333;
    text-align: center;

function App() {
    return (
        <StyledApp>
            <h1>Styled Components</h1>
            <p>Welcome to styled-components</p>
        </StyledApp>
    )
}


Dieser Code verwendet eine Stilkomponente und verschachtelt den Stil für die h1- und p- Tags.

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:

import styled from "styled-components";


const MainColor = "red";

function App() {
    return (
        <>
            <Heading>Hello World!</Heading>
        </>
    );
}


Im obigen Codeblock wird der Text „ Hello World! “ 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 als die 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, packen Sie die gestylte Komponente in den styled() -Konstruktor und fügen dann alle zusätzlichen Stile hinzu.

In diesem Beispiel erbt die PrimaryButton- Komponente den Stil der Button-Komponente und fügt eine andere Hintergrundfarbe (Blau) hinzu.

import styled from "styled-components";
import React from "react";


const Button = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

function App() {
    return (
        <Button>Welcome</Button>
        <PrimaryButton>Hello There!</PrimaryButton>
    )
}


Sie können auch das Tag ändern, das eine gestylte Komponente rendert, indem Sie das als Requisite verwenden.

Mit der as- Prop können Sie das zugrunde liegende HTML/JSX-Element angeben, als das die gestaltete Komponente gerendert wird.

Zum Beispiel:

import styled from "styled-components";
import React from "react";


const Button = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

function App() {
    return (
        <Button as='a' href='#'>Welcome</Button>
    )
}


Dieser Code rendert die Button- Komponente als a- Element und setzt ihr href- Attribut auf „#“.

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 eine 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 Funktion createGlobalStyle und deklarieren die erforderlichen Stile.

Zum Beispiel:

import {createGlobalStyle} from 'styled-components';


const GlobalStyles = createGlobalStyle`
    @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

export default GlobalStyles;


Anschließend importieren Sie die GlobalStyles- Komponente in Ihre App-Komponente und rendern sie. Durch das Rendern der GlobalStyles- Komponente in Ihrer App-Komponente werden die Stile auf Ihre Anwendung angewendet.

So:

import React from 'react';
import GlobalStyles from './Global';


function App() {
    return (
        <div>
            <GlobalStyles />
        </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.