Cómo aplicar estilo a los componentes de React con CSS

Puede diseñar sus aplicaciones y páginas de React utilizando una serie de técnicas. Lo más fácil sería descargar una biblioteca de componentes React. Sin embargo, incluso cuando use bibliotecas, tarde o temprano necesitará agregar estilos personalizados. Entonces, ¿cuál es la mejor manera de hacerlo?

Para proyectos a pequeña escala, puede diseñar cómodamente su aplicación utilizando estilos en línea , módulos o escribiendo las especificaciones de className usted mismo. Y para proyectos dinámicos, como aplicaciones, es mejor usar una biblioteca que le permita implementar accesorios fácilmente.

Alternativamente, puede usar un kit de utilidades como Tailwind UI, que viene con estilos prediseñados. Si necesita renderizar una maqueta o una presentación, los kits de interfaz de usuario compatibles con React son el camino a seguir.

Estilo práctico con className

En React, los estilos CSS prácticos se aplican a través de la propiedad className .

Esto también es el equivalente a usar una hoja de estilo para su proyecto. Dado que React se basa en la estructura de los componentes, puede importar sus hojas de estilo solo para necesidades específicas.

Veamos un ejemplo.

Aplicación.css

 .CSS-span { display: inline-block; transform: rotate(-1deg); position: relative; color: #fff; background-color: #dd9662; padding: 1px 5px 1px 5px; border-radius: 5px; }

Aplicación.js

 import './app.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> How to Style React Components with <span className="CSS-span">CSS</span> </p> </header> </div> ); }

Y este sería el resultado:

Es una técnica vainilla completamente válida. Y se usa con mayor frecuencia para declarar variables globales que reutilizará en los componentes principales.

La única advertencia es que a medida que su proyecto crece, también lo hace el potencial de conflictos de nombres.

Asimismo, el costo de eficiencia de administrar cientos de hojas de estilo es absurdamente alto.

Uso de JSX para estilos en línea

React te permite diseñar elementos DOM usando estilos en línea. Si bien la lógica CSS sigue siendo la misma, el estilo en sí tiene que pasar por JavaScript. Esto también se conoce como JSX.

Veamos un ejemplo:

Titular.js

 function Headline(){ const headlineStyle = { backgroundColor: "#fff", lineHeight: "1.5", height: "2rem", border: "none", color: "black" } return ( <div style= { headlineStyle } > <h2>Headline title</h2> <p>the sub-headline</p> </div> ) }

Una cosa que notará es que en lugar de escribir line-height usamos lineHeight .

La explicación de esto es que, "Dado que JSX está más cerca de JavaScript que de HTML, React DOM usa la convención de nomenclatura de propiedades camelCase en lugar de nombres de atributos HTML". .

Los estilos en línea generalmente se usan para mostrar ejemplos, pero también para agregar un estilo dinámico a elementos específicos. Además, los estilos en línea no admiten pseudoelementos o consultas de medios, ya que solo puede pasar estilo . Usar una hoja de estilo es una mejor alternativa.

Crear alcance local con módulos CSS

Si desea aplicar estilos personalizados a los componentes sin colisiones de nombres, una forma de hacerlo es a través de los módulos CSS.

Este es un enfoque en el que puede aplicar el alcance local a cada componente individualmente.

Al igual que:

Encabezado.módulo.css

 .container { width: 1280px; margin: 1rem auto; padding: 1rem; } .header { background-color: #ffffff; color: #000000; font-weight: 700; }

Encabezado.js

 import styles from './Header.module.css'; function Header() { return ( <div className={styles.container}> <h2 className={styles.header}>Using CSS Modules in React</h2> </div> ); }

También puede hacer cosas como la composición , donde llama a un estilo específico desde otra hoja de estilo, evitando la necesidad de reescribir la misma lógica dos veces.

 .header { composes: header from './style.css'; }

CSS en JS

A diferencia de marcos como Vue y Svelte, React no proporciona su propia interfaz de estilo.

Entonces, si bien puede escribir CSS para componentes usando los métodos mencionados anteriormente, el enfoque del santo grial es usar CSS en bibliotecas JS. Cada biblioteca tiene sus puntos fuertes y débiles, pero, en general, los beneficios siguen siendo los mismos:

• Accesorios para varias variaciones de estilo.
• Tematización accesible.
• Ámbito de estilo basado en componentes.
• Variables dinámicas de CSS usando funciones de JavaScript.

La solución más popular para CSS en JS son los componentes con estilo.

Y otras opciones notables incluyen Emotion y Linaria. Por el bien de la demostración, veamos cómo se integra CSS en un componente React usando la biblioteca Styled Components.

Componentes con estilo.js

 import styled from 'styled-components'; const HeaderWrapper = styled.section` padding: 4em; background: orange; `; const HeaderTitle = styled.h2` font-size: 2rem; text-align: center; color: black; `; <HeaderWrapper> <HeaderTitle>Example of creating a React component with Styled Components.</HeaderTitle> </HeaderWrapper>

Primero, creamos un nuevo componente llamado HeaderWrapper que generará un contenedor <section> para nuestro título de encabezado. Luego creamos otro componente llamado HeaderTitle y le pasamos las variables CSS. Entonces, en cierto modo, esto es exactamente lo mismo que trabajar con componentes web, solo que en el contexto de React.

Uso de un marco CSS

No es que todo en front-end se esté moviendo hacia marcos y bibliotecas.

Tiene más que ver con el hecho de que comenzar un proyecto desde cero es ineficiente. Un marco como Tailwind CSS ayuda a aliviar la necesidad de escribir todas las estructuras de su aplicación desde cero. La forma en que funciona Tailwind CSS es que el marco proporciona clases de utilidad que están predeterminadas, lo que le permite estructurar un diseño sin necesidad de escribir CSS independiente.

TailwindCSSApp.js

 function Header() { return ( <div className="container mx-auto bg-gray-500 rounded-xl shadow border p-8 m-10"> <p className="text-3xl text-black-700 font-bold mb-5"> Tailwind CSS with React </p> <p className="text-black-300 text-lg"> All styling defined with utility classes </p> </div> ); } export default Header;

Entonces, en lugar de definir el estilo del componente usando Constantes , podemos escribir directamente el estilo como lo especifica el marco. Un método como este es extremadamente eficiente y, por ejemplo, puede importar componentes de la interfaz de usuario (como tarjetas) creados por otros.

Tailwind CSS es particularmente popular porque puede copiar y pegar fragmentos directamente y usarlos en el diseño de su aplicación sin ninguna consecuencia.

Uso de una biblioteca de interfaz de usuario

El último método para diseñar los componentes de React es usar una biblioteca de interfaz de usuario. A diferencia de un marco, una biblioteca de interfaz de usuario sigue pautas de estilo. Entonces, en muchos sentidos, viene con un estilo que ya está predeterminado. Los gustos de Mantine y Material UI son algunas de las opciones de acceso.

El único "inconveniente" es que tienes que pasar bastante tiempo aprendiendo esa biblioteca en particular. Pero, lo mismo podría decirse de los marcos. A pesar de la barrera de entrada, tanto los marcos CSS como las bibliotecas de UI son el estándar de oro en el estilo de los componentes de React.