¡Buen dia amigos!
Hoy quiero hablarte sobre el estilo en React.
¿Por qué es relevante esta pregunta? ¿Por qué existen diferentes enfoques para trabajar con estilos en React?
Cuando se trata de marcado (HTML), React pone JSX (JavaScript y XML) a nuestra disposición. JSX le permite escribir marcas en archivos JS; esta técnica se puede llamar "HTML-in-JS".
Sin embargo, cuando se trata de estilos, React no proporciona herramientas especiales (¿JSC?). Por lo tanto, cada desarrollador es libre de elegir tales herramientas a su gusto.
En total, hay 5 enfoques para diseñar componentes de React:
- Estilos globales: todos los estilos están contenidos en un archivo (por ejemplo, index.css)
- CSS- — (, «css»); CSS- ( index.css) "@import"
- «» CSS- ( React-; «» , «css-modules» React, .. , , «create-react-app») — «Component.module.css», «Component» — (, ); JS- , (: import styles from './Button.module.css'; <button style={styles.button}> </button>)
- («») — «style» (, <button style={{ borderRadius: '6px'; } }> </button>)
- «CSS--JS» — , CSS JS-; «styled-components»: import styled from 'styled-components'; const Button = styled`- css`; <Button> </Button>
En mi opinión, la mejor solución es el último enfoque, es decir, CSS a JS. Parece el más lógico en términos de describir la estructura (marcado), apariencia (estilos) y lógica (secuencia de comandos) del componente en un archivo; obtenemos algo como All-in-JS. Aquí
puede encontrar una hoja de trucos sobre el uso de la biblioteca de "componentes con estilo" . También podría estar interesado en echar un vistazo a la hoja de trucos Hook .
Bueno, el peor enfoque en mi opinión son los estilos en línea. Sin embargo, vale la pena señalar que definir objetos con estilo antes de definir un componente y luego usar esos objetos es similar a CSS-in-JS, pero todavía hay camelCase, atributos de estilo y estilos en línea que dificultan la inspección del DOM.
Aquí hay una aplicación de contador de React simple que usa constantemente todos estos enfoques de estilo (con la excepción de los estilos en línea).
El código fuente es GitHub .
Salvadera:
La aplicación se ve así: La
aplicación consta de tres componentes: Título - el título, Contador - el valor del contador e información sobre si el número es positivo o negativo, par o impar, Control - un panel de control que le permite aumentar, disminuir y restablecer el valor del contador.
La estructura del proyecto es la siguiente:
|--public |--index.html |--src |--components |--Control |--Control.js |--Control.module.css |--package.json |--styles.js |--Counter |--Counter.js |--Control.module.css |--package.json |--styles.js |--Title |--Title.js |--Title.module.css |--package.json |--index.js |--css |--control.css |--counter.css |--title.css |--App.js |--global.css |--index.js |--nativeModules.css |--reactModules.css ...
Repasemos algunos de los archivos en el directorio "src":
- index.js: punto de entrada de JavaScript (en terminología de "empaquetado") donde se importan los estilos globales y se representa el componente "Aplicación"
- App.js es el componente principal donde los componentes Control, Contador y Título se importan y combinan
- global.css: estilos globales, es decir estilos de todos los componentes en un archivo
- nativeModules.css — , CSS- «css» (control.css, counter.css title.css)
- reactModules.css — «» CSS-
- components/Control/Control.js — «Control» ( / CSS-, c «» CSS- ),
- components/Control/Control.module.css — «» CSS- «Control»
- components/Control/styles.js — «Control» ( , )
- components / Control / package.json: archivo con "main": "./Control", lo que facilita la importación de un componente (en lugar de importar Control desde './Control/Control', puede usar Import Control from './ Control'
- components / index.js: reexportación, lo que le permite importar todos los componentes a la vez en App.js
Como siempre, estaré encantado de recibir comentarios.
Gracias por su atención y que tenga un buen día.