Tutorial React: Manejo de clases y estilos

Sintaxis de estilos en línea y estilos en línea dinámicos

En React, los estilos en línea se aplican directamente a los elementos mediante el atributo style. Este atributo acepta un objeto JavaScript donde las propiedades CSS se escriben en camelCase en lugar de la notación kebab-case. A continuación se muestra un ejemplo básico de cómo aplicar estilos en línea a un componente:

// EstilosEnLinea.jsx
export default function EstilosEnLinea() {
  const estiloParrafo = {
    color: 'blue',
    fontSize: '20px',
    margin: '10px'
  };

  return (
    <div>
      <p style={estiloParrafo}>Este es un párrafo con estilos en línea.</p>
    </div>
  );
}

En este ejemplo, el objeto estiloParrafo define varios estilos CSS que se aplican al párrafo mediante el atributo style.

Para aplicar estilos en línea dinámicos, se puede utilizar una función que calcule los estilos en base a alguna condición o estado. Esto permite cambiar los estilos de un componente de manera dinámica según las props o el estado del componente. A continuación se muestra un ejemplo de cómo hacerlo:

// EstilosDinamicos.jsx
export default function EstilosDinamicos({ activo, onClick }) {
  const estiloBoton = {
    backgroundColor: props.activo ? 'green' : 'red',
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer'
  };

  return (
    <button style={estiloBoton} onClick={onClick}>
      {activo ? 'Activo' : 'Inactivo'}
    </button>
  );
}

En este ejemplo, el estilo del botón cambia dependiendo del valor de la prop activo. Si activo es true, el botón tendrá un fondo verde; de lo contrario, será rojo.

Además, se pueden combinar múltiples objetos de estilos para construir estilos más complejos o reutilizables. Por ejemplo:

// EstilosCombinados.jsx
export default function EstilosCombinados({ importante }) {
  const estiloBase = {
    padding: '10px',
    borderRadius: '5px',
    border: '1px solid black'
  };

  const estiloDinamico = {
    backgroundColor: importante ? 'yellow' : 'white'
  };

  const estiloCombinado = {
    ...estiloBase,
    ...estiloDinamico
  };

  return (
    <div style={estiloCombinado}>
      Contenido con estilos combinados.
    </div>
  );
}

Aquí, estiloCombinado se crea combinando estiloBase y estiloDinamico usando el operador de propagación (...). Esto permite una gran flexibilidad y reutilización de estilos en componentes React.

Finalmente, es importante tener en cuenta que los estilos en línea se aplican directamente a los elementos DOM, lo que puede tener implicaciones de rendimiento y especificidad. Se recomienda usar estilos en línea principalmente para casos donde los estilos son altamente dinámicos y no pueden predefinirse en clases CSS. Para estilos más estáticos o reutilizables, es preferible usar clases CSS o técnicas como CSS Modules o CSS-in-JS.

Uso de clases CSS y aplicación condicional de clases

En React, el uso de clases CSS permite aplicar estilos de manera más estructurada y reutilizable a los componentes. Las clases se definen en archivos CSS y se aplican a los elementos mediante el atributo className. A continuación se muestra un ejemplo básico de cómo aplicar clases CSS a un componente:

// EstilosConClases.jsx
import './EstilosConClases.css';

export default function EstilosConClases() {
  return (
    <div className="contenedor">
      <p className="texto">Este es un párrafo con clases CSS.</p>
    </div>
  );
}

En este ejemplo, las clases contenedor y texto se definen en el archivo EstilosConClases.css:

/* EstilosConClases.css */
.contenedor {
  padding: 20px;
  background-color: #f0f0f0;
}

.texto {
  color: blue;
  font-size: 18px;
}

Para aplicar clases CSS de manera condicional en función de algún estado o prop, se puede utilizar una lógica en el atributo className. Una técnica común es usar plantillas literales de JavaScript o bibliotecas como classnames para gestionar las clases de manera más limpia. A continuación se muestra un ejemplo de cómo hacerlo:

// ClasesCondicionales.jsx
import './ClasesCondicionales.css';

export default function ClasesCondicionales(props) {
  const claseBoton = props.activo ? 'boton-activo' : 'boton-inactivo';

  return (
    <button className={claseBoton} onClick={props.onClick}>
      {props.activo ? 'Activo' : 'Inactivo'}
    </button>
  );
}

En este ejemplo, la clase del botón cambia dependiendo del valor de la prop activo. Si activo es true, el botón tendrá la clase boton-activo; de lo contrario, tendrá la clase boton-inactivo. Las clases se definen en el archivo ClasesCondicionales.css:

/* ClasesCondicionales.css */
.boton-activo {
  background-color: green;
  color: white;
}

.boton-inactivo {
  background-color: red;
  color: white;
}

Para casos más complejos donde se necesita combinar múltiples clases condicionales, se puede utilizar la biblioteca classnames. Esta biblioteca permite construir cadenas de clases de manera más declarativa. A continuación se muestra un ejemplo de cómo usar classnames:

// ClasesCondicionalesAvanzadas.jsx
import classNames from 'classnames';
import './ClasesCondicionalesAvanzadas.css';

export default function ClasesCondicionalesAvanzadas(props) {
  const clases = classNames({
    'boton': true,
    'boton-activo': props.activo,
    'boton-deshabilitado': props.deshabilitado
  });

  return (
    <button className={clases} onClick={props.onClick} disabled={props.deshabilitado}>
      {props.activo ? 'Activo' : 'Inactivo'}
    </button>
  );
}

Aquí, la biblioteca classnames se usa para construir la cadena de clases. La clase boton siempre se aplica, mientras que las clases boton-activo y boton-deshabilitado se aplican condicionalmente en función de las props activo y deshabilitado, respectivamente. Las clases se definen en el archivo ClasesCondicionalesAvanzadas.css:

/* ClasesCondicionalesAvanzadas.css */
.boton {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.boton-activo {
  background-color: green;
  color: white;
}

.boton-deshabilitado {
  background-color: gray;
  color: darkgray;
  cursor: not-allowed;
}

El uso de clases CSS y su aplicación condicional permite una mayor flexibilidad y control sobre los estilos de los componentes en React, facilitando la gestión de estilos complejos y dinámicos de manera eficiente.

Introducción a CSS Modules

CSS Modules son una técnica de modularización de estilos que permite encapsular los estilos CSS a nivel de componente en aplicaciones React. Con CSS Modules, cada archivo CSS se convierte en un módulo que exporta sus clases como propiedades de un objeto, lo que evita conflictos de nombres y facilita el mantenimiento del código.

Para empezar a usar CSS Modules en React, se deben seguir estos pasos:

Creación de archivos CSS Modules: Los archivos CSS que serán utilizados como módulos deben tener la extensión .module.css. Por ejemplo, crea un archivo Estilos.module.css:

/* EstiloConCSSModule.module.css */
.contenedor {
  padding: 20px;
  background-color: #f0f0f0;
}

.texto {
  color: blue;
  font-size: 18px;
}

Importación de estilos en los componentes: Los estilos definidos en un archivo CSS Module se importan en el componente correspondiente como un objeto. Cada clase CSS se convierte en una propiedad del objeto importado. A continuación, se muestra cómo se importan y usan estos estilos en un componente:

// EstilosConCSSModule.jsx
import styles from './EstiloConCSSModule.module.css';

export default function EstilosConCSSModule() {
  return (
    <div className={styles.contenedor}>
      <p className={styles.texto}>Este es un párrafo con CSS Modules.</p>
    </div>
  );
}

Uso en la aplicación principal: Asegúrate de que el componente que utiliza CSS Modules se incluya y renderice en la aplicación principal. Por ejemplo, en el archivo App.jsx:

// App.jsx
import EstilosConCSSModule from './components/EstiloConCSSModule/EstiloConCSSModule';

export default function App() {
  return (
    <EstilosConCSSModule />
  );
}

Configuración avanzada (opcional): Si necesitas personalizar el comportamiento de CSS Modules, como cambiar el patrón de nombres de las clases generadas, puedes hacerlo en el archivo de configuración de Vite (vite.config.js). Aquí tienes un ejemplo de cómo configurar CSS Modules para usar nombres de clases en camelCase y un patrón específico para los nombres generados:

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  css: {
    modules: {
      localsConvention: 'camelCaseOnly',
      generateScopedName: '[name]__[local]___[hash:base64:5]'
    }
  }
});

Con esta configuración, los nombres de las clases se convertirán a camelCase y se generarán con el patrón [name]__[local]___[hash:base64:5], donde [name] es el nombre del archivo, [local] es el nombre de la clase original y [hash:base64:5] es un hash único de 5 caracteres.

CSS Modules proporcionan una forma efectiva de gestionar estilos en proyectos React, permitiendo que los estilos sean locales a cada componente y evitando conflictos globales. Esta técnica es especialmente útil en aplicaciones grandes donde la modularización y el aislamiento de estilos son cruciales para el mantenimiento y escalabilidad del código.

Introducción a CSS-in-JS

CSS-in-JS es una técnica que permite escribir estilos CSS directamente dentro de los archivos JavaScript. Esta metodología ofrece varias ventajas, como la encapsulación automático de los estilos, la eliminación de colisiones de nombres y la posibilidad de utilizar toda la potencia de JavaScript para generar estilos dinámicamente. En el contexto de React, hay varias bibliotecas populares que implementan CSS-in-JS, como styled-components y emotion.

Instalación y uso de styled-components

Una de las bibliotecas más utilizadas es styled-components, que permite definir componentes con estilos adjuntos. A continuación se muestra cómo se puede utilizar styled-components en un proyecto React:

Instalación de styled-components: Primero, es necesario instalar la biblioteca mediante npm o yarn.

npm install styled-components

Creación de componentes con styled-components: Con styled-components, se pueden crear componentes React con estilos encapsulados. Aquí un ejemplo básico:

// MiBotonConEstiloJS.jsx
import styled from 'styled-components';

const BotonConEstiloJS = styled.button`
  background-color: ${props => props.activo ? 'green' : 'gray'};
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
`;

export default function MiBotonConEstiloJS({ activo }) {
  return (
    <BotonConEstiloJS activo={activo}>
      {activo ? 'Activo' : 'Inactivo'}
    </BotonConEstiloJS>
  );
}

En este ejemplo, el componente BotonConEstiloJS cambia su color de fondo dinámicamente en función de la propiedad activo, como props en el componente MiBotonConEstiloJS.

Uso de temas con styled-components: styled-components soporta la creación de temas, lo que permite definir un conjunto de estilos globales que pueden ser utilizados en toda la aplicación.

// theme.js
export const theme = {
  colores: {
    primario: 'blue',
    secundario: 'gray'
  }
};

// App.jsx
import { ThemeProvider } from 'styled-components';
import { theme } from './theme';
import MiBotonConEstiloJS from './components/MiBotonConEstiloJS/MiBotonConEstiloJS';

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <MiBotonConEstiloJS />
      <MiBotonConEstiloJS activo={true} />
    </ThemeProvider>
  );
}

En este ejemplo, el ThemeProvider proporciona el tema a todos los componentes hijos, permitiendo el acceso a los colores definidos en theme.

Estilos anidados y pseudoclases: styled-components permite definir estilos anidados y utilizar pseudoclases, lo que facilita la creación de componentes complejos.

// MiTarjeta.jsx
import styled from 'styled-components';

const Tarjeta = styled.div`
  background-color: white;
  border: 1px solid ${props => props.theme.colores.primario};
  padding: 20px;
  border-radius: 5px;

  &:hover {
    background-color: ${props => props.theme.colores.secundario};
  }

  .titulo {
    font-size: 24px;
    color: ${props => props.theme.colores.primario};
  }
`;

export default function MiTarjeta() {
  return (
    <Tarjeta>
      <div className="titulo">Título de la tarjeta</div>
      <p>Contenido de la tarjeta.</p>
    </Tarjeta>
  );
}

En este ejemplo, el componente Tarjeta tiene estilos que cambian dinámicamente basados en el tema proporcionado por ThemeProvider. El color de fondo de la tarjeta cambia cuando el usuario pasa el ratón por encima, gracias a la pseudoclase :hover. Además, se define una clase .titulo dentro del componente Tarjeta para estilizar el título con un tamaño de fuente específico y un color basado en el tema.

Instalación y uso de emotion

emotion es otra biblioteca popular para CSS-in-JS, con una sintaxis similar a styled-components.

Instalación: Primero, instala los paquetes necesarios:

npm install @emotion/react @emotion/styled

Uso de emotion: Aquí tienes un ejemplo básico de cómo utilizar styled de emotion para crear un botón con estilos dinámicos:

// BotonConEmotion.jsx
import styled from '@emotion/styled';

const Boton = styled.button`
  border: none;
  background-color: ${props => props.activo ? 'green' : 'gray'};
  padding: 10px 20px;
  cursor: pointer;
  &:hover {
    color: white;
  }
`

export default function BotonConEmotion({ activo }) {
  return (
    <Boton activo={activo}>
      {activo ? 'Activo' : 'Inactivo'}
    </Boton>
  );
}

En este ejemplo, se utiliza styled de emotion para crear un componente de botón (Boton). El color de fondo del botón cambia dinámicamente según la prop activo, y se aplica un estilo adicional cuando el botón es enfocado (hover), cambiando el color del texto a blanco.

CSS-in-JS ofrece una solución robusta para la gestión de estilos en aplicaciones React, permitiendo escribir estilos de manera modular y dinámica, integrando completamente CSS y JavaScript. Esta técnica es particularmente útil en aplicaciones grandes y complejas, donde el mantenimiento y la escalabilidad de los estilos son críticos.

Buenas prácticas de manejo de estilos en React

Para gestionar los estilos en aplicaciones React de manera eficiente y mantenible, es fundamental seguir una serie de buenas prácticas que permitan un desarrollo más limpio y escalable. A continuación, se detallan algunas recomendaciones clave para el manejo de estilos en React:

Modularización de estilos: Utiliza técnicas como CSS Modules o CSS-in-JS para encapsular los estilos a nivel de componente. Esto evita conflictos de nombres y facilita el mantenimiento del código. Por ejemplo, con CSS Modules:

/* Estilos.module.css */
.contenedor {
  padding: 20px;
  background-color: #f0f0f0;
}

.texto {
  color: blue;
  font-size: 18px;
}

// EstilosConCSSModules.jsx
import styles from './Estilos.module.css';

export default function EstilosConCSSModules() {
  return (
    <div className={styles.contenedor}>
      <p className={styles.texto}>Este es un párrafo con CSS Modules.</p>
    </div>
  );
}

Nombres de clases descriptivos: Utiliza nombres de clases que describan claramente el propósito del estilo. Evita abreviaciones o nombres genéricos. Esto ayuda a que el código sea más legible y fácil de entender.

Reutilización de estilos: Define estilos reutilizables para elementos comunes como botones, contenedores y textos. Esto se puede lograr mediante la creación de componentes estilizados con bibliotecas como styled-components o emotion:

// BotonEstilizado.jsx
import styled from 'styled-components';

const Boton = styled.button`
  background-color: ${props => props.activo ? 'green' : 'red'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
`;

export default function BotonEstilizado(props) {
  return (
    <Boton activo={props.activo} onClick={props.onClick}>
      {props.activo ? 'Activo' : 'Inactivo'}
    </Boton>
  );
}

Uso de variables y temas: Centraliza los valores de estilos comunes como colores, tamaños y espaciados en un archivo de variables o utiliza un sistema de temas. Esto facilita la modificación global de estilos y asegura la consistencia visual. Con styled-components, se puede utilizar el ThemeProvider:

// theme.js
export const theme = {
  colores: {
    primario: 'blue',
    secundario: 'gray'
  },
  espaciado: {
    pequeno: '8px',
    mediano: '16px',
    grande: '32px'
  },
  borderRadius: '0.375rem'
}

// BotonConTema.jsx
import styled from "styled-components";

const Button = styled.button`
  background-color: ${props => props.theme.colores.primario};
  color: white;
  padding: ${props => props.theme.espaciado.mediano} ${props => props.theme.espaciado.grande};
  border: none;
  border-radius: ${props => props.theme.borderRadius};
  cursor: pointer;
  font-weight: bold;
  &:hover {
    background-color: ${props => props.theme.colores.secundario};
  }
`;
export default function BotonConTema() {
  return (
    <Button>
      Haz clic aquí
    </Button>
  )
}

// App.jsx
import { ThemeProvider } from 'styled-components';
import { theme } from './theme';
import BotonConTema from './components/BotonConTema/BotonConTema';

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <BotonConTema />
    </ThemeProvider>
  );
}

Evitar estilos en línea: Aunque los estilos en línea pueden ser útiles para casos altamente dinámicos, es preferible evitarlos para estilos estáticos o reutilizables. Los estilos en línea no permiten la reutilización y pueden afectar el rendimiento y la especificidad de los estilos.

Separación de responsabilidades: Mantén la lógica de estilos separada de la lógica de la aplicación. Los componentes deben centrarse en la estructura y el comportamiento, mientras que los estilos deben gestionarse de manera independiente. Esto se puede lograr mediante la creación de archivos de estilos específicos o componentes estilizados.

Documentación y comentarios: Documenta los estilos complejos o personalizados para facilitar su comprensión y mantenimiento por parte de otros desarrolladores. Los comentarios en los archivos de estilos pueden ser muy útiles para explicar decisiones de diseño o técnicas específicas.

Uso de herramientas de linters y formateadores: Utiliza herramientas como stylelint para asegurar la consistencia y calidad del código CSS. Estas herramientas pueden detectar errores comunes y aplicar reglas de estilo uniformes en todo el proyecto.

Optimización de rendimiento: Evita el uso excesivo de estilos complejos o anidados que puedan impactar negativamente en el rendimiento de la aplicación. Prioriza el uso de clases CSS y técnicas de optimización como el uso de will-change para animaciones.

Pruebas de estilos: Considera la integración de pruebas de estilos visuales utilizando herramientas como jest y react-testing-library para asegurar que los componentes se rendericen correctamente con los estilos aplicados.

Siguiendo estas buenas prácticas, se puede lograr una gestión de estilos más eficiente y mantenible en aplicaciones React, mejorando tanto la calidad del código como la experiencia de desarrollo.