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 em React ainda é baseada 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 style e 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, 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.