Opções de Estilização no React
Deslize para mostrar o menu
O React não impõe uma única maneira de estilizar componentes. Em vez disso, oferece flexibilidade para escolher como os estilos serão aplicados conforme as necessidades do projeto.
A estilização no React ainda se baseia em CSS. A diferença está em como os estilos são organizados e aplicados aos componentes.
Neste curso, o foco será em duas abordagens principais de estilização:
- Estilos inline: estilos aplicados diretamente aos elementos usando o atributo
stylee objetos JavaScript; - Arquivos CSS externos: estilos escritos em arquivos CSS tradicionais e aplicados por meio de nomes de classe.
Estilização com bibliotecas e frameworks
Em projetos reais, aplicações React costumam ser estilizadas utilizando bibliotecas de terceiros e frameworks. Algumas opções populares incluem:
- CSS Modules;
- Styled Components;
- Emotion;
- Tailwind CSS;
- Material UI (MUI);
- Chakra UI.
Essas ferramentas oferecem recursos avançados, como estilos com escopo, sistemas de design e estilização baseada em utilitários.
Por Que Não Abordamos Aqui
Embora sejam poderosas, as bibliotecas de estilização adicionam complexidade adicional e introduzem novos conceitos além do React básico. Neste curso, o objetivo é construir uma base sólida, compreender como os componentes React funcionam e evitar distrações desnecessárias neste início.
Quando você estiver confortável com os conceitos básicos de React, aprender qualquer biblioteca de estilização se torna muito mais fácil.
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
