React

Adicionar múltiplas classes em componente de React

10 de janeiro de 2022

Adicionar múltiplas classes em componente de React

Neste artigo você vai aprender a como colocar múltiplas classes em componente de React, ou seja, adicionar mais classes de CSS

múltiplas classes em componente de React capa

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!
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x