CSS-in-JS: Styled-components y Emotion
Escriba estilos de componentes como template literals etiquetados con styled-components o mediante la prop css con Emotion, y use props para estilos dinámicos.
CSS-in-JS: Styled-components y Emotion es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 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 Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué es CSS-in-JS?
CSS-in-JS permite escribir los estilos de los componentes directamente en JavaScript/TypeScript. Los estilos se colocan junto a los componentes, admiten valores dinámicos de las props y se limitan automáticamente a su ámbito. Las dos bibliotecas más populares son styled-components y Emotion.
Conceptos básicos de styled-components
Use literales de plantilla etiquetados para definir componentes con estilo. El resultado es un componente de React que representa un elemento HTML con los estilos aplicados.
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: prop css
La prop css de Emotion aplica estilos a cualquier elemento JSX. Requiere el pragma @emotion/react o el ajuste preestablecido de 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>
);
}Estilos dinámicos a partir de props
Ambas bibliotecas pueden leer las props para calcular los estilos. Esta es su principal ventaja frente al CSS estático: no es necesario cambiar de clase.
Temas con ThemeProvider
Tanto styled-components como Emotion admiten un ThemeProvider que inyecta los valores del tema en todos los componentes con estilo.
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;
`;Extensión de componentes con estilo
Extienda un componente con estilo existente para crear una variante sin duplicar los estilos.
const Button = styled.button`
padding: 8px 16px;
border-radius: 4px;
`;
const DangerButton = styled(Button)`
background: #e53e3e;
color: white;
`;Estilos globales
Use createGlobalStyle (styled-components) o Global (Emotion) para CSS global, como los estilos y los resets de body.
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui; }
`;
<><GlobalStyle /><App /></>Coste de ejecución de CSS-in-JS
Las bibliotecas de CSS-in-JS inyectan estilos en tiempo de ejecución mediante JavaScript. Esto añade un coste de CPU para analizar e inyectar estilos, además de aumentar el tamaño del bundle de JavaScript. Las alternativas sin tiempo de ejecución (vanilla-extract, linaria) generan CSS estático en tiempo de compilación.
Alternativas sin tiempo de ejecución
vanilla-extract: escriba estilos en TypeScript, que se compilan en CSS estático. linaria: sintaxis de CSS-in-JS compilada en CSS Modules. Ambas ofrecen la ergonomía de CSS-in-JS sin costes en tiempo de ejecución.
TypeScript con styled-components
Defina un ThemeType y extienda la interfaz DefaultTheme de styled-components para obtener temas completamente tipados.
import 'styled-components';
import { theme } from './theme';
declare module 'styled-components' {
export interface DefaultTheme extends typeof theme {}
}Cuándo elegir CSS-in-JS
CSS-in-JS es excelente para: estilos dinámicos controlados por valores de JavaScript en tiempo de ejecución, sistemas de diseño con grandes necesidades de tematización y equipos que prefieren flujos de trabajo centrados en JavaScript. El coste de ejecución suele ser aceptable en interfaces cuyo rendimiento no es crítico.
Comprobación rápida
¿Cuál es la principal desventaja de las bibliotecas de CSS-in-JS en tiempo de ejecución frente a las soluciones de CSS estático?
Repaso: CSS-in-JS
Styled-components: literales de plantilla etiquetados que representan un elemento de React con estilo. Emotion: prop css o API styled. Los estilos dinámicos a partir de props eliminan el cambio de clases. ThemeProvider inyecta los valores del tema. createGlobalStyle sirve para el CSS global. El coste de ejecución es la principal desventaja. Alternativas sin tiempo de ejecución: vanilla-extract, linaria.
Preguntas frecuentes
¿La lección «CSS-in-JS: Styled-components y Emotion» es gratis?
Sí — el texto completo de «CSS-in-JS: Styled-components y Emotion» 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 Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «CSS-in-JS: Styled-components y Emotion»?
Escriba estilos de componentes como template literals etiquetados con styled-components o mediante la prop css con Emotion, y use props para estilos dinámicos. Practicas Frontend 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 Frontend Academy?
No se requiere experiencia previa. Frontend 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 3 de 4.
¿Cuánto tiempo toma la lección «CSS-in-JS: Styled-components y Emotion»?
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 Frontend Academy?
Sí. Cada lección de Frontend 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
- Metodología BEM: Block Element Modifier
- CSS Modules: nombres de clase con ámbito
- CSS-in-JS: Styled-components y Emotion
- Enfoque utility-first de Tailwind CSS