0Pricing
CSS Academy · Lección

Styled-components: tagged template literals

Cree componentes React con estilos mediante tagged template literals y la biblioteca styled-components.

Styled-components: tagged template literals es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 1 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 styled-components?

styled-components es una biblioteca CSS-in-JS para React que permite escribir CSS directamente dentro de archivos JavaScript mediante literales de plantilla etiquetados. Cada componente con estilo recibe nombres de clase únicos con alcance automático.

Literales de plantilla etiquetados

Los literales de plantilla etiquetados de JavaScript permiten que una función procese una cadena de plantilla. styled-components utiliza esta funcionalidad para analizar 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>

Estilos dinámicos con props

Acceda a las props del componente dentro del literal de plantilla para aplicar estilos dinámicos:

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 propiedades personalizadas de CSS

Para valores dinámicos más sencillos, prefiera las propiedades personalizadas de CSS a la lógica basada en props: ofrecen un mejor rendimiento y reducen la interpolación de 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' }}>

Extender estilos

Extienda un componente con estilo existente para añadir estilos:

const PrimaryButton = styled(Button)`
  background: royalblue;
  font-weight: bold;
`;

const DangerButton = styled(Button)`
  background: crimson;
`;

Anidamiento y selector &

styled-components admite el anidamiento similar al de Sass mediante & para hacer referencia al elemento principal:

const Nav = styled.nav`
  display: flex;

  & a {
    color: white;
    text-decoration: none;
  }

  & a:hover {
    text-decoration: underline;
  }
`;

createGlobalStyle

Defina estilos globales (restablecimientos y estilos base) mediante 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 root

ThemeProvider

styled-components proporciona un ThemeProvider para acceder a los tokens del tema en los componentes:

import { ThemeProvider } from 'styled-components';

const theme = { colors: { primary: 'royalblue' } };

const Button = styled.button`
  background: ${({ theme }) => theme.colors.primary};
`;

// <ThemeProvider theme={theme}><App /></ThemeProvider>

Consideraciones de rendimiento

styled-components genera nombres de clase durante el tiempo de ejecución. Para aplicaciones en las que el rendimiento sea crítico, considere la extracción estática mediante el plugin de Babel o el cambio a alternativas sin tiempo de ejecución, como Vanilla Extract o CSS Modules.

Renderizado del lado del servidor

styled-components admite SSR mediante la API ServerStyleSheet para recopilar e insertar estilos durante el renderizado en el servidor, evitando el parpadeo de contenido sin estilos.

Alternativas y ecosistema

El ecosistema de styled-components incluye: emotion (API similar), linaria (sin tiempo de ejecución), Vanilla Extract (seguro con tipos) y Panda CSS (orientado a utilidades). Cada opción implica un equilibrio entre la sobrecarga en tiempo de ejecución, la experiencia de desarrollo y el rendimiento.

Comprobación rápida

¿Cómo evita styled-components las colisiones de nombres de clase entre componentes?

Resumen

styled-components utiliza literales de plantilla etiquetados para definir CSS junto con componentes de React. Las props pueden controlar estilos dinámicos mediante interpolaciones de JavaScript. Los componentes se pueden extender, anidar y adaptar a temas mediante ThemeProvider. En producción, considere el plugin de Babel para la extracción estática y la compatibilidad con el renderizado del lado del servidor. Para alternativas sin tiempo de ejecución, evalúe Vanilla Extract o CSS Modules.

Preguntas frecuentes

¿La lección «Styled-components: tagged template literals» es gratis?

Sí — el texto completo de «Styled-components: tagged template literals» 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 «Styled-components: tagged template literals»?

Cree componentes React con estilos mediante tagged template literals y la biblioteca styled-components. 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 1 de 4.

¿Cuánto tiempo toma la lección «Styled-components: tagged template literals»?

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

  1. Styled-components: tagged template literals
  2. Emotion: css() y styled()
  3. CSS Modules: estilos con ámbito
  4. Vanilla Extract: CSS-in-JS sin runtime
← Volver a CSS Academy