Styling mit Styled Components in React

In vorherigen Lektionen haben wir die Methoden des Stylings mit globalem CSS und Inline-Styling betrachtet. In dieser Lektion werden wir mit einem effektiveren Ansatz für große Anwendungen arbeiten - der Verwendung der Bibliothek styled-components.

Also, nehmen wir unsere Komponente ohne CSS-Stile, die wir in den letzten Lektionen verwendet haben:

function App() {
	return (
		<div>
			<p>text</p>
			<p>text</p>
			<p>text</p>
		</div>
	);
}

Zuerst installieren wir die Bibliothek Styled Components:

npm install --save styled-components

Dann importieren wir das benötigte Paket in die Komponente App:

import styled from 'styled-components';

Nun können wir Tags in Stile verpacken und sie als React-Komponenten verwenden, aber bereits mit direkt im JS angehängten Stilen. Diesen Ansatz nennt man auch CSS in JS.

Lassen Sie uns den ersten Absatz stylen. Dafür erstellen wir vor der Funktion App nach den Import-Zeilen die Komponente Text1. Im Objekt styled aus der Bibliothek benötigen wir einen Absatz, deshalb schreiben wir styled.p. Dann, in der Template-String, listen wir die benötigten CSS-Stile auf - wie in normalem CSS:

const Text1 = styled.p`
	color: orangered;
	font-weight: bold;
`;

Wie Sie sehen, verwenden wir hier reines CSS in Form von Template-Strings, was sehr praktisch ist. Auf ähnliche Weise können wir Media-Queries, Pseudoelemente, Selektoren und andere CSS-Funktionalitäten verwenden.

Nun ersetzen wir innerhalb der Funktion der Komponente App das Tag p durch unsere erstellte Komponente Text1 mit CSS-Stilen:

<Text1>text</Text1>

Auf ähnliche Weise stylen wir den zweiten und dritten Absatz. Dafür erstellen wir die Komponenten Text2 und Text3:

const Text2 = styled.p`
	font-style: italic;
	color: brown;
`;

const Text3 = styled.p`
	background-color: orange;
	font-weight: bold;
	color: white;
`;

Und schließlich stylen wir unser Div. Dafür erstellen wir eine Komponente und nennen sie Container:

const Container = styled.div`
	width: 200px;
	border: 2px solid brown;
	padding: 10px;
	text-align: center;
`;

Wir ersetzen alle unsere Tags durch die erstellten Komponenten:

import styled from "styled-components";

const Container = styled.div`
	width: 200px;
	border: 2px solid brown;
	padding: 10px;
	text-align: center;
`;

const Text1 = styled.p`
	color: orangered;
	font-weight: bold;
`;

const Text2 = styled.p`
	font-style: italic;
	color: brown;
`;

const Text3 = styled.p`
	background-color: orange;
	font-weight: bold;
	color: white;
`;

function App() {
	return (
		<Container>
			<Text1>text</Text1>
			<Text2>text</Text2>
			<Text3>text</Text3>
		</Container>
	);
}

Dank dieses Ansatzes kann man wiederverwendbare Komponenten mit Stilen erstellen.

Wenn Sie das generierte Markup im Entwicklerwerkzeug des Browsers öffnen, werden Sie sehen, dass jede Komponente ihre eigenen eindeutigen Klassen generiert hat. So müssen wir uns keine Sorgen mehr über Konflikte zwischen Klassen einzelner Komponenten machen.

Ähnlich kann man Komponenten stylen, indem man beispielsweise die Bibliothek Emotion verwendet.

Nehmen Sie die React-Komponente, die Sie in der Aufgabe zur letzten Lektion erstellt haben, und stylen Sie sie unter Verwendung der Bibliothek Styled Components.