CSS Academy · Lezione

Emotion: css() e styled()

Applichi stili dinamici con l’helper css() di Emotion e la factory di componenti styled().

Emotion: css() e styled() è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 2 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'è Emotion

Emotion è una libreria CSS-in-JS con un'API flessibile. Offre due approcci principali: la funzione css() (indipendente dal framework) e l'API styled() (simile a styled-components). Entrambi generano automaticamente nomi di classe con ambito locale.

Installare Emotion

Esistono due pacchetti, a seconda delle esigenze:

npm install @emotion/react    # css prop and Global
npm install @emotion/styled   # styled() API
npm install @emotion/css      # framework-agnostic

La funzione css()

La funzione css() genera un nome di classe a partire da un oggetto CSS o da un template literal:

import { css } from '@emotion/css';

const buttonStyle = css`
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
`;

function Button({ children }) {
  return <button className={buttonStyle}>{children}</button>;
}

Oggetti CSS con css()

La sintassi a oggetti è un'alternativa ai template literal, utile per il completamento automatico in TypeScript:

const cardStyle = css({
  background: 'white',
  borderRadius: '8px',
  padding: '24px',
  boxShadow: '0 4px 16px rgba(0,0,0,0.1)'
});

API styled()

Lo styled di Emotion funziona esattamente come styled-components, facilitando la migrazione tra le due librerie:

import styled from '@emotion/styled';

const Card = styled.div`
  background: white;
  border-radius: 8px;
  padding: 24px;
`;

const FeaturedCard = styled(Card)`
  border: 2px solid gold;
`;

La prop css (stile inline)

La prop css di Emotion consente di scrivere gli stili direttamente sugli elementi JSX, senza dover creare un componente aggiuntivo. Richiede il pacchetto @emotion/react e un plugin Babel/SWC:

/** @jsxImportSource @emotion/react */

function Component() {
  return (
    <div css={{ background: 'white', padding: '24px' }}>
      Content
    </div>
  );
}

Stili dinamici con Emotion

Entrambe le API accettano funzioni che ricevono le props per definire valori dinamici:

const Badge = styled.span`
  background: ${({ variant }) => variant === 'error' ? 'crimson' : 'royalblue'};
  color: white;
  padding: 2px 8px;
  border-radius: 9999px;
`;

Stili globali

Utilizzi Global da @emotion/react per definire CSS globali:

import { Global, css } from '@emotion/react';

function App() {
  return (
    <>
      <Global styles={css`
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; }
      `} />
    </>
  );
}

Emotion e styled-components

Emotion e styled-components hanno API quasi identiche. Emotion offre prestazioni leggermente migliori nei benchmark, una dimensione del bundle più contenuta e la prop css come API aggiuntiva. Entrambe sono scelte collaudate in produzione per le applicazioni React.

Keyframe in Emotion

Definisca le animazioni con l'helper keyframes:

import { keyframes, css } from '@emotion/react';

const bounce = keyframes`
  from { transform: translateY(0); }
  to   { transform: translateY(-20px); }
`;

const animated = css`
  animation: ${bounce} 1s ease-in-out infinite alternate;
`;

Rendering lato server

Emotion supporta il rendering lato server tramite extractCriticalToChunks(), che consente di raccogliere e iniettare il CSS critico durante il rendering lato server nei framework React come Next.js.

Verifica rapida

Qual è la differenza fondamentale tra la funzione css() di Emotion e la sua API styled()?

Riepilogo

Emotion offre due API principali per la gestione degli stili: css() genera nomi di classe (da applicare tramite className), mentre styled() crea componenti React con stili. La prop css consente di definire gli stili in modo simile agli stili inline, mantenendo tutta la potenza del CSS. Emotion è altamente compatibile con styled-components a livello di API e spesso è più veloce. Entrambi gli approcci applicano automaticamente un ambito locale agli stili tramite nomi di classe generati.

Domande Frequenti

La lezione «Emotion: css() e styled()» è gratuita?

Sì — il testo completo di «Emotion: css() e styled()» è 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 «Emotion: css() e styled()»?

Applichi stili dinamici con l’helper css() di Emotion e la factory di componenti styled(). 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 2 di 4.

Quanto tempo richiede la lezione «Emotion: css() e styled()»?

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

← Torna a CSS Academy