¿Qué vas a aprender en esta lección?

En esta lección, te explicaré cómo agregar estilos a una aplicación Vite con React de tres maneras diferentes.

CSS en línea

La forma más directa de agregar estilos a un componente JSX es con CSS en línea.

Es decir, agregaremos estilos directamente en los elementos JSX. Esto se hace utilizando la propiedad style y escribiendo un objeto de JavaScript.

function App() {
  return (
		<h2 style={{ backgroundColor: 'blue', color: 'white' }}>
			Hola blissmo
		</h2>
  );
}

Para usar esta estrategia no es necesario configurar nada, podemos escribir CSS en cualquier elemento JSX. Pero es importante mencionar que con esta sintaxis no podemos configurar seudo elementos como :hover o :focus ni definir keyframes.

👀 Toma nota de cómo las propiedades que se escriben con guión medio en CSS, aquí en JSX las escribiremos con camelCase. Por ejemplo: padding-top: 2rem; se escribiría así en camelCase ⇒ paddingTop: ”2rem”,

CSS externo

También podemos usar archivos .css para usar selectores y clases CSS, en nuestro JSX.

Como estamos trabajando en un proyecto Vite, lo único que necesitamos es importar el archivo CSS en el mismo archivo donde se encuentra nuestro componente.

Luego, se puede aplicar cualquier estilo deseado en los componentes de la aplicación utilizando las clases definidas en el archivo CSS.

// src/style.css

.title {
	font-size: 3rem;
	font-family: sans-serif;
}

import './style.css';

function App() {
  return (
		<h2 className="title">
			Hola blissmo
		</h2>
  );
}

Toma nota de que en el JSX de React, no podemos usar la propiedad class, esta palabra estará reservada, así que en su lugar emplearemos className.

Módulos CSS

Una tercera forma de agregar estilos a una aplicación de React es mediante el uso de módulos de CSS(2).

Para ello se crea un archivo CSS para cada componente y luego se importa como un objeto de estilos, en el archivo del componente.

import styles from './mi-estilo.module.css';

function App() {
  return (
		<h2 className={styles.title}>
			Hola blissmo
		</h2>
  );
}

Los estilos definidos en ese archivo CSS serán únicos para el componente, lo que evita que colisiones de clases o sobre escrituras, como normalmente sucede utilizando archivos CSS.

Seguramente con el tiempo, ⌛️ encontraremos formas nuevas y creativas de cómo complicarlo todo, sobre todo ahora que tenemos sitios web 3D. Mientras tanto, conociendo estas tres formas básicas estás cubierta(o).

🤓 Yo creo que ya es tiempo de crear todo un componente.

Enlaces relacionados

Esta es una pregunta en stackoverflow.com(1) donde se enlistan las herramientas más populares para trabajar con estilos en línea de forma más estructurada y profesional.

React pseudo selector inline styling

Repo original de CSS MODULES(2)

GitHub - css-modules/css-modules: Documentation about css-modules

Referencias.

1: Stack overflow que es una comunidad de expertos en programación, donde puedes hacer preguntas o resolver las de otros developers, puedes votar por la mejor respuesta y es una de las mas importantes fuentes de información sobre programación web

2: Los módulos CSS son archivos en los que todos los nombres de clases CSS y animaciones son incluidas en el scope local por default.