Estilos con className y style

En React puedes aplicar estilos mediante clases CSS o mediante la prop style. Las clases sirven para reutilizar reglas. Los estilos en línea resultan cómodos cuando una propiedad depende de un dato.

Un ejemplo con las tres formas #

Crea estas reglas en src/App.css:

1.naranja {
2  background-color: orange;
3  color: black;
4  padding: 8px 16px;
5}

En src/App.tsx:

1import type { CSSProperties } from 'react';
2import './App.css';
3
4export default function Ejem_05() {
5  const misEstilos: CSSProperties = {
6    backgroundColor: 'green',
7    color: 'white',
8    padding: 12,
9  };
10
11  return (
12    <>
13      <button className="naranja">Con clase CSS</button>
14      <button style={misEstilos}>Con objeto de estilos</button>
15      <button style={{ backgroundColor: 'pink' }}>Con objeto directo</button>
16    </>
17  );
18}

En JSX usamos className para asignar clases. El archivo CSS debe estar importado para que sus reglas se carguen.

style recibe un objeto de JavaScript, no una cadena CSS. Sus propiedades se escriben en camelCase: backgroundColor en lugar de background-color. Las dobles llaves de style={{ ... }} representan una expresión JSX que contiene un objeto.

Muchas propiedades que representan longitudes aceptan un número y React lo interpreta en píxeles: padding: 12. Otras, como opacity, no llevan unidad. Para unidades explícitas utiliza cadenas, por ejemplo width: '80%'.

Elegir una forma #

Usa clases para reglas comunes, pseudoclases como :hover y consultas de tamaño de pantalla. Usa style cuando necesitas calcular un valor con JavaScript. También puedes combinar className y style en el mismo elemento.

Una clase como text-amber-300 solo funciona si el proyecto tiene Tailwind configurado. En los ejemplos de este curso utilizaremos CSS normal o estilos en línea para poder probarlos con la plantilla inicial.

Prueba tú #

Cambia el texto y el color de los tres botones. Añade una regla .naranja:hover para distinguir los estilos de interacción de los valores en línea.

Cuestionario del tema #

Abre el cuestionario en las actividades de este tema para comprobar lo aprendido. Cada respuesta incluye una explicación.