CursosEmpresasBlogLiveConfPrecios

Contenido del curso

No sé dónde empezar

Herramientas avanzadas: escalabilidad, organización y persistencia

Tomar examen

Estilos CSS en componentes de React

Resumen

Aplicar estilos CSS en React tiene dos caminos claros: los inline styles con objetos JavaScript y las hojas .css importadas en cada componente. Saber cuándo usar cada uno te permite construir interfaces vivas, accesibles y fieles al diseño de Figma sin pelearte con la sintaxis.

¿Cómo se aplican estilos en línea dentro de un componente JSX?

En JSX el atributo style no recibe un string como en HTML, sino un objeto JavaScript. Por eso aparece la famosa sintaxis de dobles llaves: las primeras llaves abren JavaScript dentro de JSX y las segundas crean el objeto con las propiedades CSS [02:30].

jsx

<h1 style={{ backgroundColor: 'red', fontSize: 24, textAlign: 'center' }}> Has completado 2 TODOs </h1>

Dos detalles importantes que cambian respecto al CSS tradicional:

  • Las propiedades se escriben en camelCase: background-color se convierte en backgroundColor.
  • Los valores numéricos sin unidad se interpretan como píxeles, así que fontSize: 24 equivale a 24px. Para em, rem o porcentajes sí necesitas pasar un string.

¿Por qué React usa camelCase en lugar de guiones? Porque style recibe un objeto JavaScript, y los nombres de propiedades con guion no son válidos como claves sin comillas. El camelCase mantiene la sintaxis limpia.

¿Cómo importar archivos CSS en componentes de React?

La segunda forma es crear un archivo .css con la sintaxis de toda la vida e importarlo desde el componente sin asignarlo a ninguna variable [06:45]. Create React App se encarga de inyectar esos estilos en una etiqueta <style> dentro del <head> del HTML final.

jsx import './TodoCounter.css';

function TodoCounter() { return <h1 className="TodoCounter">Has completado 2 TODOs</h1>; }

Esta opción suele ser más cómoda porque mantiene el CSS separado, permite usar la nomenclatura BEM y facilita la lectura. En el proyecto Todo Machine se usa esta forma para cada componente: CreateTodoButton.css, TodoCounter.css, TodoItem.css, TodoList.css y TodoSearch.css.

¿Cómo aplicar clases dinámicas según las props del componente?

Para que un TodoItem completado se vea tachado y con el ícono verde, necesitas que ciertas clases aparezcan solo cuando props.completed sea true. La solución es usar template literals con comillas invertidas y el operador ternario [14:20].

jsx <span className={Icon Icon-check ${props.completed && 'Icon-check--active'}}> V </span>

<p className={`TodoItem-p ${props.completed && 'TodoItem-p--complete'}`}> {props.text} </p>

Aquí entra una particularidad de React: si la condición devuelve false, null, undefined o 0, ese valor se renderiza tal cual como parte del className. No rompe la aplicación, pero verás clases llamadas literalmente false en el DOM. Es un comportamiento del que conviene estar consciente.

¿Qué es BEM y por qué se usa en React? BEM es una nomenclatura de clases CSS basada en bloque, elemento y modificador (Icon-check--active). Ayuda a evitar colisiones de estilos y a leer rápido qué hace cada clase.

¿Cómo agregar fuentes personalizadas con Google Fonts?

La fuente Montserrat no viene por defecto en los navegadores. Para usarla en Todo Machine, basta con agregar el <link> de Google Fonts en el index.html y declarar la fuente en index.css [12:10]. Si la fuente falla en cargar, el navegador usa Arial como respaldo.

html

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700" rel="stylesheet">

Declarar pesos 400 y 700 permite combinar texto normal con negrillas, lo que se nota en el TodoCounter cuando los números aparecen en bold dentro de etiquetas <span>.

¿Qué detalles de diseño hacen que la app se sienta pulida?

Varios pequeños ajustes marcan la diferencia entre una maqueta plana y una interfaz cuidada:

  • El CreateTodoButton usa position: fixed para flotar abajo a la derecha y un transform: rotate en el hover para girar al hacer clic.
  • El TodoSearch mantiene el outline por accesibilidad, pero cambia su color al azul React para integrarse con el diseño.
  • Los íconos comparten una clase base Icon y modificadores como Icon-check (verde) e Icon-delete (rojo en hover).
  • El texto completado recibe text-decoration: line-through para mostrar el tachado.

¿Qué propiedades CSS necesita el TodoCounter?

El título principal lleva font-size: 24px, text-align: center, margin: 0 para limpiar los márgenes que los navegadores aplican por defecto a <h1>, y padding: 48px para dar aire. Los <span> internos llevan font-weight: bold para resaltar los números.

¿Por qué la app todavía no está viva aunque tenga estilos?

Con CSS resuelto, la interfaz se ve casi idéntica al Figma, pero falta lo más importante: la interacción. El buscador no filtra, los botones no completan, el modal no se abre. Esos comportamientos pertenecen al siguiente bloque de fundamentos de React, donde entran el estado, los eventos y la reactividad entre componentes.

Cuéntame en los comentarios si prefieres inline styles u hojas .css, y muéstrame cómo quedó tu versión de Todo Machine.