Neste artigo você vai aprender a como colocar múltiplas classes em componente de React, ou seja, adicionar mais classes de CSS
Fala programador(a), beleza? Bora aprender mais sobre classes e React!
As vezes queremos colocar uma classe fixa e outra dinâmica no nosso componente de React
Utilizando o atributo className isso é possível, mas como executar da melhor forma?
Basicamente utilizaremos template literals, as classes fixas vão como strings e as dinâmicas como variáveis
Veja um exemplo prático:
// variable
const myClass = "test"
// component
<p className={`fixed-class ${myClass}`}>Some text...</p>
Primeiramente definimos a variável com a classe dinâmica, que pode vir como alguma requisição AJAX ou por outro meio
A ideia é que ela possa ser alterada a qualquer momento
Já a fixed-class é uma classe que não será dinâmica, precisamos alterar o nome manualmente se formos mudar ela
E assim conseguimos colocar mais de uma classe em uma regra className, simples não é? 🙂
Conclusão
Neste artigo você aprendeu a como inserir múltiplas classes em componente de React
Utilizamos a regra className, porém com template literals
Assim podemos inserir classes ‘fixas’ ou por meio de variáveis
Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!
Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!
Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias
O link acima contém um cupom de desconto para os cursos!