CSS-in-JS-Bibliotheken sind wie Styled-Components in den letzten Jahren immer beliebter geworden. Sie kapseln CSS bis auf Komponentenebene und ermöglichen es Ihnen, JavaScript zu verwenden, um wiederverwendbare Stile zu definieren.
Mit Styled-Components können Sie die komponentengesteuerte Architektur beibehalten, die React bereits verstärkt. Aber die Bibliothek hat auch einige Nachteile.
Wie gestylte Komponenten funktionieren
Das gestylte Komponenten Mit der CSS-in-JS-Bibliothek können Sie CSS in Ihre Komponentendateien schreiben. Seine Syntax ist die gleiche wie bei CSS, also ist es ziemlich einfach zu erlernen. Es ist ein perfekter Mittelweg für JavaScript-Entwickler, die dazu neigen, sich von reinem CSS fernzuhalten.
Um zu sehen, wie es funktioniert, betrachten Sie die folgende Title-Komponente, die ein h1-Element rendert.
konst Titel = styled.h1`
Schriftgröße: 1.5em;
Textausrichtung: Mitte;
Farbe Rot;
`;
Sie können diese Komponente wie jede andere React-Komponente verwenden.
konst Startseite = () => {
Rückkehr (
<Titel>Eine formatierte Komponentenüberschrift</Title>
)
}
Es ist auch sehr leistungsfähig, weil es die Arbeit mit Requisiten und Zuständen erleichtert.
Beispielsweise hängen Farbe und Hintergrund dieser Komponente von den Requisiten ab.
importieren gestylt aus "gestylte Komponenten";konst Button = styled.button`
Polsterung: 00,8 Rem 1.6 Rest;
Hintergrundfarbe: ${(Requisiten) => (props.primary? "Violett": "Weiß")};
Grenze: 1px fest #00000;
Farbe: ${(Requisiten) => (props.primary? "Weiß": "Violett")};
`;
ExportUrsprünglichFunktionHeim() {
Rückkehr <Taste primär>Primär</Button>
}
Bei gestylten Komponenten müssen Sie die Requisiten nicht manuell an das CSS übergeben. Es ist automatisch verfügbar und vereinfacht Schreibstile, die von Daten aus der Komponente abhängen.
Vorteile der Verwendung von Styled Components
Hier sind einige Vorteile der Verwendung der styled-components-Bibliothek.
Es löst CSS-Spezifitätsprobleme
Gestylte Komponenten eliminieren Spezifitätsprobleme, da sie CSS in eine Komponente kapseln. Das bedeutet, dass Sie sich keine Sorgen machen müssen, dass Klassennamen kollidieren oder Ihre Benutzeroberfläche aufgrund von Klassennamenkollisionen in ein Durcheinander gerät.
Ermöglicht das Schreiben von CSS in Komponenten
Wie aus dem Beispiel der Schaltflächenkomponente hervorgeht, können Sie mit styled-components CSS und JS in derselben Datei kombinieren. Sie müssen also keine separate CSS-Datei erstellen oder ständig von Datei zu Datei wechseln.
Dies ist ein großer Vorteil beim Erstellen von UI-Kits, da Sie alle Funktionen der Komponenten in einer Datei speichern.
Ansonsten CSS in Komponenten schreiben. Es erleichtert das Teilen von Requisiten und Zuständen mit Stilen.
Ermöglicht Typprüfung
Mit gestylten Komponenten können Sie die in Ihren Stilen verwendeten Requisiten und Werte überprüfen. Beispielsweise können Sie die Schaltflächenkomponente oben mit TypeScript neu schreiben.
SchnittstelleRequisiten{
primär: boolesch
}
const Button = styled.button<Requisiten>`
Polsterung: 00,8 Rem 1.6 Rest;
Hintergrundfarbe: ${(Requisiten) => (props.primary? "Violett": "Weiß")};
Grenze: 1px fest #00000;
Farbe: ${(Requisiten) => (props.primary? "Weiß": "Violett")};
`;
Verwenden von TypeScript in der Komponente bedeutet, Typfehler beim Codieren zu überprüfen und die Debugging-Zeit zu verkürzen.
Unterstützt Theming Out of the Box
Hinzufügen eines dunklen Themas oder ein anderes Thema für Ihre Bewerbung kann schwierig und zeitaufwändig sein. Styled-Komponenten vereinfachen den Prozess jedoch. Sie können Ihrer App Designs hinzufügen, indem Sie eine
konst Schaltfläche = styled.main`
Hintergrundfarbe: ${props => props.theme.light.background};
Farbe: ${props => props.theme.light.fontColor};
`
<ThemeProvider theme={theme}>
<Taste>
Lichttaste
</Button>
</ThemeProvider>
Die ThemeProvider-Komponente übergibt die Designs an alle formatierten Komponenten, die sie umschließt. Diese Komponenten können dann die Themenwerte in ihren Stilen verwenden. In diesem Beispiel verwendet die Schaltfläche die Themenwerte für die Hintergrund- und Schriftfarben.
Nachteile der Verwendung von Styled Components
Während die Verwendung der styled-components-Bibliothek viele Vorteile hat, hat sie auch Nachteile.
Es ist nicht Framework-unabhängig
CSS in JS zu schreiben bedeutet, dass die Trennung der beiden in Zukunft schwierig sein wird, was für die Wartbarkeit schrecklich ist. Zum Beispiel, wenn Sie sich jemals entscheiden, Ihre zu wechseln JavaScript-Framework, müssen Sie den größten Teil Ihrer Codebasis neu schreiben.
Dies ist zeit- und kostenintensiv. Verwenden CSS-Module oder eine Framework-unabhängige Bibliothek wie Emotion ist zukunftssicherer.
Es kann schwer zu lesen sein
Die Unterscheidung zwischen gestylten und React-Komponenten kann schwierig sein, insbesondere außerhalb eines atomaren Designsystems. Betrachten Sie dieses Beispiel:
<Hauptsächlich>
<Nav>
<Listenpunkt>
<Link Text>Adoptiere ein Haustier</LinkText>
</ListItem>
<Listenpunkt>
<Link Text>Spenden</LinkText>
</ListItem>
</Nav>
<Header>Adoptiere, don'nicht einkaufen!</Header>
<SecondaryBtn btnText="Spenden" />
</Main>
Die einzige Möglichkeit zu wissen, welche Komponente Geschäftslogik enthält, besteht darin, zu prüfen, ob sie Requisiten hat. Auch wenn die Komponentennamen in diesem Beispiel beschreibend sind, ist es dennoch schwierig, sie zu visualisieren.
Beispielsweise könnte die Header-Komponente eine Überschrift sein, aber wenn Sie die Stile nicht überprüfen, werden Sie vielleicht nie wissen, ob es sich um h1, h2 oder h3 handelt.
Einige Entwickler lösen dieses Problem, indem sie nur die gestylte Komponente als Wrapper verwenden und die semantischen HTML-Tags für die darin enthaltenen Elemente verwenden.
In diesem Beispiel könnte die Header-Komponente ein h1-Tag verwenden.
<h1>Adoptiere, don'nicht einkaufen!</h1>
Sie können dies weiterführen, indem Sie die gestylten Komponenten in einer anderen Datei (z. B. styled.js) definieren, die Sie später in eine React-Komponente importieren können.
importieren * wie Gestylt aus './gestylt'
// styled.components verwenden
<gestylt. Hauptsächlich>
// Code
</styled.Main>
Auf diese Weise erhalten Sie einen klaren Überblick darüber, welche Komponenten gestylt sind und welche React-Komponenten sind.
Styled Components werden zur Laufzeit kompiliert
Bei Anwendungen, die formatierte Komponenten verwenden, lädt der Browser das CSS herunter und parst es mit JavaScript, bevor es in die Seite eingefügt wird. Dies führt zu Leistungsproblemen, da der Benutzer beim anfänglichen Laden viel JavaScript herunterladen muss.
Statisches CSS ist viel schneller. Es muss nicht verarbeitet werden, bevor der Browser es zum Gestalten von Seiten verwendet. Die styled-components-Bibliothek wird jedoch mit jeder Version verbessert. Wenn Sie sich eine reduzierte Leistung leisten können, fahren Sie fort und verwenden Sie sie.
Wann sollten gestylte Komponenten verwendet werden?
Einige Entwickler schreiben gerne CSS in JS-Dateien, während andere lieber separate CSS-Dateien haben. Wie Sie CSS schreiben, sollte letztendlich vom Projekt selbst abhängen und davon, was Ihnen oder Ihrem Team gefällt. Gestylte Komponenten sind eine gute Wahl zum Erstellen einer UI-Bibliothek, da sich alles in einer Datei befinden und einfach exportiert und wiederverwendet werden kann.
Wenn Sie lieber reines CSS schreiben, verwenden Sie CSS-Module. Sie können separate CSS-Dateien haben, und Stile werden standardmäßig lokal festgelegt. Unabhängig davon, welche Wahl Sie treffen, sind solide CSS-Kenntnisse unerlässlich.
