export default function App() {
  return (
    <div>
      <h2>Mi tarjeta</h2>
      <p>Añade estilos inline a este contenedor</p>
      <p>Usa backgroundColor, padding y borderRadius</p>
    </div>
  );
}

Estilos en React

CSS en el mundo React

Ya sabes CSS. La buena noticia es que en React puedes seguir usándolo. La diferencia es que tienes varias formas de aplicar estilos, cada una con sus ventajas.

Forma 1: Estilos inline

En HTML, los estilos inline son un string: style="color: red; font-size: 16px". En JSX, style es un objeto JavaScript:

Las diferencias clave:

• Doble llave {{}}: la exterior es JSX, la interior es el objeto
• camelCase: background-color → backgroundColor, font-size → fontSize
• Valores como strings: '20px', '#333', '1rem'
• Los números sin unidad se asumen como píxeles: padding: 20 = padding: '20px'

Estilos en una variable

Para código más limpio, extrae los estilos a un objeto:

Estilos dinámicos

Lo poderoso de los estilos inline es que puedes hacerlos dinámicos:

Forma 2: Clases CSS con className

Puedes importar un archivo CSS normal y usar className:

Recuerda: className, no class.

Clases condicionales

¿Cuándo usar cada forma?

Tu desafío 🚀

Estiliza la tarjeta del editor usando estilos inline:

1. Añade style={{}} al div contenedor
2. Usa backgroundColor para darle un color de fondo
3. Añade padding para darle espacio interior
4. Experimenta con borderRadius, boxShadow, color, etc.

Los estilos inline son tu herramienta para prototipos rápidos y estilos dinámicos. Para estilos más complejos, las clases CSS siguen siendo el rey.