Stylizacja za pomocą Styled Components w React

W poprzednich lekcjach omówiliśmy techniki stylowania przy użyciu globalnego CSS i stylowania inline. W tej lekcji pobawimy się bardziej efektywnym dla dużych aplikacji podejściem - użyciem biblioteki styled-components.

Zatem weźmy nasz komponent bez stylów CSS, którego używaliśmy w poprzednich lekcjach:

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

Na początek zainstalujmy bibliotekę Styled Components:

npm install --save styled-components

Następnie zaimportujmy potrzebny pakiet do komponentu App:

import styled from 'styled-components';

Teraz możemy opakowywać tagi w style i stosować je jako komponenty React, ale już z dołączonymi bezpośrednio w JS stylami. Takie podejście nazywa się jeszcze CSS w JS.

Ostylujmy pierwszy akapit. W tym celu przed funkcją App po liniach importu stwórzmy komponent Text1. W obiekcie styled z biblioteki potrzebny nam jest akapit, dlatego piszemy styled.p. Następnie, w stringu szablonowym wymieniamy potrzebne nam style CSS - jak w zwykłym CSS:

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

Jak widzicie, używamy tutaj czystego CSS w postaci stringów szablonowych, co jest bardzo wygodne. W podobny sposób możemy używać zapytań medialnych, pseudoelementów, selektorów i innej funkcjonalności CSS.

Teraz wewnątrz funkcji komponentu App zamieńmy tag p na stworzony przez nas komponent Text1 ze stylami CSS:

<Text1>text</Text1>

W podobny sposób ostylujmy drugi i trzeci akapit. W tym celu stworzymy komponenty Text2 i Text3:

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

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

I, na koniec, ostylujmy naszego diva. W tym celu stworzymy komponent i nazwiemy go Container:

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

Zamieńmy wszystkie nasze tagi na stworzone komponenty:

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>
	);
}

Dzięki takiemu podejściu można tworzyć wielokrotnie używane komponenty ze stylami.

Jeśli otworzycie wygenerowany kod w panelu deweloperskim w przeglądarce, to zobaczycie, że u każdego komponentu wygenerowane są swoje unikalne klasy. W ten sposób, nie musimy się więcej martwić o konflikty między klasami poszczególnych komponentów.

W podobny sposób można stylować komponenty, używając, na przykład, biblioteki Emotion.

Weź komponent React, który robiłeś w zadaniu do poprzedniej lekcji, ostyluj go, używając biblioteki Styled Components.