[Tradução] 4 maneiras de estilizar reagir componentes

Olá Habr! Apresento a você a tradução do artigo “4 maneiras de modelar componentes de reação” .



Até o momento, muitas maneiras de modelar componentes do React foram desenvolvidas. Das bibliotecas ao uso de arquivos CSS tradicionais. A escolha é bastante extensa e provavelmente estará de acordo com suas preferências. Aqui estão quatro maneiras de estilizar os componentes do React.

CSS embutido

Como o JSX é convertido em elementos HTML, isso permite que você use o atributo style. Os estilos podem ser aplicados aos elementos simplesmente passando a eles um objeto com propriedades. Será algo parecido com isto:



No entanto, este método é muito limitado. Ele não pode usar pseudo-seletores, como: pairar, bem como consultas de mídia. Mas isso não significa que não deva ser usado. Pode ser usado quando houver apenas 2 ou 3 propriedades que não exijam pseudo-seletores ou consultas de mídia e / ou em situações em que é necessário o uso de condições em estilos.

Bibliotecas de estilos

Eu gosto apenas de aprender novas bibliotecas ou estruturas. Este método é o meu favorito para modelar componentes do React. Existem muitas bibliotecas de estilos que permitem não apenas estilizar componentes, mas também fornecer “super recursos” adicionais, como os chamo, juntamente com todos os recursos de CSS que facilitam as coisas.

Um exemplo de uso pode ser assim:



O exemplo acima é um exemplo de uso da biblioteca de componentes com estilo.

O invólucro é chamado de componente estilizado. Os estilos são definidos na constante Wrapper, que simplesmente cria um componente com esses estilos. Apenas determine que tipo de elemento você precisa, por exemplo: div, header ou img, e use-o como se fosse um componente React. Não são elementos HTML, apenas componentes, o que torna o código mais limpo e fácil de ler.

Esta é apenas a minha preferência. Talvez você goste de usar uma div ou veja elementos HTML nativos. Não tem problema! A Khan Academy desenvolveu a biblioteca Aphrodite, que usa elementos HTML, mas anexa estilos ao componente usando o atributo className.

Meu artigo sobre Afrodite

Essas bibliotecas também têm muitos recursos adicionais que permitem fazer coisas incríveis. Existem muitas bibliotecas, então você só precisa tentar ver qual delas ficará com você.

Aqui estão os dois mais populares no momento:

https://www.styled-components.com/
https://glamorous.rocks/

Estilos externos

Você pode escrever estilos em um arquivo CSS externo e importá-los para o componente, quando necessário. Este foi provavelmente o primeiro método que você aprendeu quando começou a aprender o React. No entanto, ao adicionar elementos adicionais, há um problema ao nomeá-los. Todos os estilos estão no escopo global. Por exemplo, você tinha dois itens com o mesmo nome criados por você ou seu companheiro de equipe; nesse caso, você pode encontrar esse problema.

Módulos CSS

Os módulos CSS são muito semelhantes à gravação de CSS em arquivos externos. A única diferença é que os estilos são encapsulados, em contraste com o uso tradicional de arquivos CSS externos. Isso significa que os estilos não entrarão em conflito ou se substituirão. Você usa os mesmos métodos usados ​​no CSS tradicional. Também permite o uso de todas as boas metodologias, como o BEM. Você pode ler mais aqui:

https://github.com/css-modules/css-modules

Tudo o que você decidir usar: CSS tradicional, módulos CSS, CSS embutido, bibliotecas de estilos ou uma combinação desses métodos, na minha opinião, tudo se resume às suas preferências e às de sua equipe.

Obrigado pela leitura. Encontrou um erro? Sinta-se livre para me falar sobre ela. Tenham um bom dia!