Styled-components: tagged template literal
Crei componenti React stilizzati utilizzando tagged template literal con la libreria styled-components.
Styled-components: tagged template literal è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 1 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 CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Che cos'è styled-components?
styled-components è una libreria CSS-in-JS per React che consente di scrivere CSS direttamente nei file JavaScript usando template literal con tag. Ogni componente styled riceve automaticamente nomi di classe univoci con scope automatico.
Template literal con tag
I template literal con tag di JavaScript consentono a una funzione di elaborare una stringa template. styled-components li usa per analizzare il CSS:
import styled from 'styled-components';
const Button = styled.button`
background: royalblue;
color: white;
padding: 10px 20px;
border-radius: 4px;
border: none;
cursor: pointer;
`;
// Usage in JSX:
// <Button>Click me</Button>Stili dinamici con le props
Acceda alle props del componente all'interno del template literal per applicare stili dinamici:
const Button = styled.button`
background: ${props => props.variant === 'danger' ? 'crimson' : 'royalblue'};
color: white;
opacity: ${props => props.disabled ? 0.5 : 1};
`;
// <Button variant="danger">Delete</Button>Alternativa con le proprietà personalizzate CSS
Per valori dinamici più semplici, preferisca le proprietà personalizzate CSS alla logica basata sulle props: è più efficiente e riduce l'interpolazione JavaScript:
const Card = styled.div`
background: var(--card-bg, white);
color: var(--card-text, #111);
`;
// Set variables via style prop: <Card style={{ '--card-bg': 'navy' }}>Estendere gli stili
Estenda un componente styled esistente per aggiungere stili:
const PrimaryButton = styled(Button)`
background: royalblue;
font-weight: bold;
`;
const DangerButton = styled(Button)`
background: crimson;
`;Nesting e selettore &
styled-components supporta il nesting in stile Sass usando & per fare riferimento all'elemento genitore:
const Nav = styled.nav`
display: flex;
& a {
color: white;
text-decoration: none;
}
& a:hover {
text-decoration: underline;
}
`;createGlobalStyle
Definisca gli stili globali (reset e stili di base) usando createGlobalStyle:
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
*, *::before, *::after { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; }
`;
// Include <GlobalStyle /> in your app rootThemeProvider
styled-components fornisce un ThemeProvider per accedere ai token del tema nei componenti:
import { ThemeProvider } from 'styled-components';
const theme = { colors: { primary: 'royalblue' } };
const Button = styled.button`
background: ${({ theme }) => theme.colors.primary};
`;
// <ThemeProvider theme={theme}><App /></ThemeProvider>Considerazioni sulle prestazioni
styled-components genera i nomi di classe durante l'esecuzione. Per le applicazioni in cui le prestazioni sono critiche, valuti l'estrazione statica tramite il plugin Babel oppure il passaggio ad alternative senza runtime come Vanilla Extract o CSS Modules.
Rendering lato server
styled-components supporta l'SSR con l'API ServerStyleSheet, che raccoglie e inietta gli stili durante il rendering lato server, evitando la comparsa del contenuto senza stili.
Alternative ed ecosistema
L'ecosistema styled-components include: emotion (API simile), linaria (senza runtime), Vanilla Extract (type-safe) e Panda CSS (utility-first). Ognuno rappresenta un compromesso diverso tra overhead del runtime, DX e prestazioni.
Verifica rapida
In che modo styled-components evita le collisioni tra i nomi di classe dei componenti?
Riepilogo
styled-components usa template literal con tag per definire il CSS insieme ai componenti React. Le props possono determinare gli stili dinamici tramite interpolazioni JavaScript. I componenti possono essere estesi, annidati e collegati a un tema tramite ThemeProvider. In produzione, valuti il plugin Babel per l'estrazione statica e il supporto al rendering lato server. Per alternative senza runtime, valuti Vanilla Extract o CSS Modules.
Impara CSS 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
- 40
- Lezioni
- 159
Domande Frequenti
La lezione «Styled-components: tagged template literal» è gratuita?
Sì — il testo completo di «Styled-components: tagged template literal» è 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 CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Styled-components: tagged template literal»?
Crei componenti React stilizzati utilizzando tagged template literal con la libreria styled-components. Eserciti CSS 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 CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS 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 1 di 4.
Quanto tempo richiede la lezione «Styled-components: tagged template literal»?
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 CSS Academy?
Sì. Ogni lezione CSS 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
- Styled-components: tagged template literal
- Emotion: css() e styled()
- CSS Modules: stili con ambito locale
- Vanilla Extract: CSS-in-JS senza runtime