Bom dia amigos!
Hoje eu quero falar com você sobre styling no React.
Por que esta questão é relevante? Por que existem diferentes abordagens para trabalhar com estilos no React?
Quando se trata de marcação (HTML), React coloca JSX (JavaScript e XML) à nossa disposição. JSX permite que você escreva marcação em arquivos JS - esta técnica pode ser chamada de "HTML-in-JS".
No entanto, quando se trata de estilos, o React não fornece nenhuma ferramenta especial (JSC?). Portanto, todo desenvolvedor é livre para escolher essas ferramentas de acordo com sua preferência.
No total, existem 5 abordagens para estilizar os componentes do React:
- Estilos globais - todos os estilos estão contidos em um arquivo (por exemplo, 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>
Na minha opinião, a melhor solução é a última abordagem, ou seja, CSS para JS. Parece o mais lógico em termos de descrição da estrutura (marcação), aparência (estilos) e lógica (script) do componente em um arquivo - obtemos algo como All-in-JS.
Uma folha de dicas sobre o uso da biblioteca de "componentes estilizados" pode ser encontrada aqui . Você também pode estar interessado em dar uma olhada na Folha de Dicas do Gancho .
Bem, a pior abordagem, na minha opinião, são os estilos embutidos. É importante notar, no entanto, que definir objetos estilizados antes de definir um componente e, em seguida, usar esses objetos é semelhante a CSS-in-JS, mas ainda existem camelCase, atributos de estilo e estilos inline que tornam difícil inspecionar o DOM.
Aqui está um aplicativo de contador React simples que usa consistentemente todas essas abordagens de estilo (com exceção dos estilos embutidos).
O código-fonte é GitHub .
Caixa de areia:
O aplicativo se parece com isto: O
aplicativo consiste em três componentes: Título - o título, Contador - o valor do contador e informações sobre se o número é positivo ou negativo, par ou ímpar, Controle - um painel de controle que permite aumentar, diminuir e redefinir o valor do contador.
A estrutura do projeto é a seguinte:
|--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 ...
Vamos examinar alguns dos arquivos no diretório "src":
- index.js - ponto de entrada JavaScript (na terminologia "bundler") onde estilos globais são importados e o componente "App" é renderizado
- App.js é o componente principal onde os componentes Control, Counter e Title são importados e mesclados
- global.css - estilos globais, ou seja, estilos de todos os componentes em um arquivo
- 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 - arquivo com "main": "./Control", o que torna mais fácil importar um componente (em vez de importar o controle de './Control/Control', você pode usar importar o controle de './ Ao controle'
- components / index.js - reexporta, permitindo que você importe todos os componentes de uma vez para o App.js
Como sempre, ficarei feliz em receber qualquer feedback.
Obrigado pela atenção e tenha um bom dia.