Styling con Styled Components in React

Nelle lezioni precedenti abbiamo esaminato le tecniche di styling utilizzando CSS globale e styling in linea. In questa lezione, lavoreremo con un approccio più efficace per applicazioni di grandi dimensioni - l'utilizzo della libreria styled-components.

Quindi, prendiamo il nostro componente senza stili CSS, che abbiamo utilizzato nelle lezioni precedenti:

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

Per iniziare, installiamo la libreria Styled Components:

npm install --save styled-components

Quindi importiamo il pacchetto necessario nel componente App:

import styled from 'styled-components';

Ora possiamo avvolgere i tag negli stili e applicarli come componenti React, ma con gli stili collegati direttamente nel JS. Questo approccio è anche chiamato CSS in JS.

Stylizziamo il primo paragrafo. Per questo prima della funzione App, dopo le righe di importazione, creiamo il componente Text1. Nell'oggetto styled dalla libreria ci serve un paragrafo, quindi scriviamo styled.p. Poi, nella stringa template, elenchiamo gli stili CSS necessari - come nel normale CSS:

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

Come puoi vedere, qui usiamo CSS puro sotto forma di stringhe template, il che è molto conveniente. In modo simile possiamo utilizzare media query, pseudo-elementi, selettori e altre funzionalità CSS.

Ora all'interno della funzione del componente App sostituiamo il tag p con il componente da noi creato Text1 con gli stili CSS:

<Text1>testo</Text1>

In modo simile stylizziamo il secondo e il terzo paragrafo. Per questo creiamo i componenti Text2 e Text3:

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

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

E, infine, stylizziamo il nostro div. Per questo creiamo un componente e lo chiamiamo Container:

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

Sostituiamo tutti i nostri tag con i componenti creati:

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>testo</Text1>
			<Text2>testo</Text2>
			<Text3>testo</Text3>
		</Container>
	);
}

Grazie a questo approccio si possono creare componenti riutilizzabili con stili.

Se apri il markup generato nel pannello degli sviluppatori nel browser, vedrai che ogni componente ha le sue classi uniche generate. In questo modo, non dobbiamo più preoccuparci di conflitti tra le classi di componenti separati.

In modo simile si possono stilizzare i componenti, utilizzando, ad esempio, la libreria Emotion.

Prendi il componente React che hai fatto nell'esercizio della lezione precedente, stylizzalo, utilizzando la libreria Styled Components.