Emotion: css() y styled()
Aplique estilos dinámicos con el helper css() y la factoría de componentes styled() de Emotion.
Emotion: css() y styled() es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué es Emotion?
Emotion es una biblioteca de CSS-in-JS con una API flexible. Ofrece dos enfoques principales: la función css() (independiente del framework) y la API styled() (similar a styled-components). Ambas generan automáticamente nombres de clase con ámbito aislado.
Instalación de Emotion
Hay dos paquetes, según sus necesidades:
npm install @emotion/react # css prop and Global
npm install @emotion/styled # styled() API
npm install @emotion/css # framework-agnosticFunción css()
La función css() genera un nombre de clase a partir de un objeto CSS o de un literal de plantilla:
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>;
}Objetos CSS con css()
La sintaxis de objetos es una alternativa a los literales de plantilla y resulta útil para obtener autocompletado en TypeScript:
const cardStyle = css({
background: 'white',
borderRadius: '8px',
padding: '24px',
boxShadow: '0 4px 16px rgba(0,0,0,0.1)'
});API styled()
El styled de Emotion funciona igual que styled-components, lo que facilita la migración entre ambos:
import styled from '@emotion/styled';
const Card = styled.div`
background: white;
border-radius: 8px;
padding: 24px;
`;
const FeaturedCard = styled(Card)`
border: 2px solid gold;
`;Prop css() (estilos en línea)
La prop css de Emotion permite escribir estilos directamente en elementos JSX, sin necesidad de crear otro componente. Requiere el paquete @emotion/react y un complemento de Babel o SWC:
/** @jsxImportSource @emotion/react */
function Component() {
return (
<div css={{ background: 'white', padding: '24px' }}>
Content
</div>
);
}Estilos dinámicos con Emotion
Ambas API aceptan funciones que reciben props para definir valores dinámicos:
const Badge = styled.span`
background: ${({ variant }) => variant === 'error' ? 'crimson' : 'royalblue'};
color: white;
padding: 2px 8px;
border-radius: 9999px;
`;Estilos globales
Utilice Global de @emotion/react para definir CSS global:
import { Global, css } from '@emotion/react';
function App() {
return (
<>
<Global styles={css`
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
`} />
</>
);
}Emotion frente a styled-components
Emotion y styled-components tienen API prácticamente idénticas. Emotion ofrece un rendimiento ligeramente superior en las pruebas comparativas, un tamaño de paquete menor y la prop css como API adicional. Ambas son opciones probadas en producción para aplicaciones React.
Keyframes en Emotion
Defina animaciones con el 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;
`;Renderizado en el servidor
Emotion admite SSR mediante extractCriticalToChunks(), que permite recopilar e insertar el CSS crítico durante el renderizado en el servidor en frameworks de React como Next.js.
Comprobación rápida
¿Cuál es la diferencia principal entre la función css() de Emotion y su API styled()?
Resumen
Emotion ofrece dos API principales para aplicar estilos: css() genera nombres de clase (que se aplican mediante className) y styled() crea componentes de React con estilos. La prop css permite escribir estilos como si fueran estilos en línea, con toda la potencia de CSS. Emotion es muy compatible con styled-components en cuanto a su API y suele ser más rápido. Ambos enfoques aíslan automáticamente los estilos mediante nombres de clase generados.
Preguntas frecuentes
¿La lección «Emotion: css() y styled()» es gratis?
Sí — el texto completo de «Emotion: css() y styled()» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Emotion: css() y styled()»?
Aplique estilos dinámicos con el helper css() y la factoría de componentes styled() de Emotion. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Emotion: css() y styled()»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Styled-components: tagged template literals
- Emotion: css() y styled()
- CSS Modules: estilos con ámbito
- Vanilla Extract: CSS-in-JS sin runtime