CSS-in-JS: Styled-components ed Emotion
Scrivere gli stili dei componenti come template literal con tag usando styled-components o con la prop css di Emotion e usare le props per gli stili dinamici.
CSS-in-JS: Styled-components ed Emotion è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Che cos’è CSS-in-JS?
CSS-in-JS definisce gli stili dei componenti direttamente in JavaScript/TypeScript. Gli stili sono collocati insieme ai componenti, supportano valori dinamici derivati dalle props e vengono limitati automaticamente all’ambito del componente. Le due librerie più diffuse sono styled-components ed Emotion.
Basi di styled-components
Utilizzi i template literal con tag per definire componenti styled. Il risultato è un componente React che esegue il rendering di un elemento HTML con gli stili applicati.
import styled from 'styled-components';
const Button = styled.button`
background: ${props => props.primary ? '#6366f1' : 'white'};
color: ${props => props.primary ? 'white' : '#6366f1'};
padding: 8px 16px;
border: 2px solid #6366f1;
border-radius: 4px;
cursor: pointer;
&:hover {
opacity: 0.9;
}
`;
<Button primary>Primary</Button>
<Button>Outline</Button>Emotion — proprietà css
La proprietà css di Emotion applica gli stili a qualsiasi elemento JSX. Richiede il pragma @emotion/react oppure il preset Babel.
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
function Card({ featured }: { featured?: boolean }) {
return (
<div css={css`
padding: 16px;
border-radius: 8px;
border: ${featured ? '2px solid #6366f1' : '1px solid #e2e8f0'};
`}>
Content
</div>
);
}Stili dinamici derivati dalle props
Entrambe le librerie possono leggere le props per calcolare gli stili. Questo è il loro principale vantaggio rispetto al CSS statico: non è necessario alternare le classi.
Temi con ThemeProvider
Sia styled-components sia Emotion supportano un ThemeProvider che inietta i valori del tema in tutti i componenti styled.
import { ThemeProvider } from 'styled-components';
const theme = { colors: { primary: '#6366f1', bg: '#f7fafc' }, space: { sm: 8, md: 16 } };
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
// Access in styled component:
const Card = styled.div`
background: ${props => props.theme.colors.bg};
padding: ${props => props.theme.space.md}px;
`;Estendere i componenti styled
Estenda un componente styled esistente per creare una variante senza duplicare gli stili.
const Button = styled.button`
padding: 8px 16px;
border-radius: 4px;
`;
const DangerButton = styled(Button)`
background: #e53e3e;
color: white;
`;Stili globali
Utilizzi createGlobalStyle (styled-components) oppure Global (Emotion) per il CSS globale, ad esempio gli stili e i reset del body.
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui; }
`;
<><GlobalStyle /><App /></>Costo a runtime di CSS-in-JS
Le librerie CSS-in-JS iniettano gli stili a runtime tramite JavaScript. Questo aggiunge un costo in termini di CPU per l’analisi e l’iniezione degli stili, oltre ad aumentare le dimensioni del bundle JavaScript. Le alternative senza runtime (vanilla-extract, linaria) generano CSS statico durante la build.
Alternative senza runtime
vanilla-extract: scriva gli stili in TypeScript, che vengono compilati in CSS statico. linaria: sintassi CSS-in-JS compilata in CSS Modules. Entrambe offrono la praticità di CSS-in-JS senza sovraccarico a runtime.
TypeScript con styled-components
Definisca un ThemeType ed estenda l’interfaccia DefaultTheme da styled-components per ottenere temi completamente tipizzati.
import 'styled-components';
import { theme } from './theme';
declare module 'styled-components' {
export interface DefaultTheme extends typeof theme {}
}Quando scegliere CSS-in-JS
CSS-in-JS è eccellente per: stili dinamici guidati da valori JavaScript a runtime, design system con forti esigenze di tematizzazione e team che preferiscono flussi di lavoro incentrati su JS. Il costo a runtime è generalmente accettabile per le interfacce utente non critiche in termini di prestazioni.
Verifica rapida
Qual è il principale compromesso delle librerie CSS-in-JS a runtime rispetto alle soluzioni con CSS statico?
Riepilogo: CSS-in-JS
Styled-components: template literal con tag, per eseguire il rendering di un elemento React styled. Emotion: proprietà css o API styled. Gli stili dinamici derivati dalle props eliminano la necessità di alternare le classi. ThemeProvider inietta i valori del tema. createGlobalStyle serve per il CSS globale. Il costo a runtime è il principale compromesso. Alternative senza runtime: vanilla-extract, linaria.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 41
- Lezioni
- 163
Domande Frequenti
La lezione «CSS-in-JS: Styled-components ed Emotion» è gratuita?
Sì — il testo completo di «CSS-in-JS: Styled-components ed Emotion» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «CSS-in-JS: Styled-components ed Emotion»?
Scrivere gli stili dei componenti come template literal con tag usando styled-components o con la prop css di Emotion e usare le props per gli stili dinamici. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «CSS-in-JS: Styled-components ed Emotion»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Frontend Academy?
Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Metodologia BEM: Block, Element e Modifier
- CSS Modules: nomi delle classi con ambito limitato
- CSS-in-JS: Styled-components ed Emotion
- Approccio utility-first di Tailwind CSS