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

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!

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

E se a classe só deve entrar em certas horas?

Muita gente cai aqui: a classe não é só dinâmica, ela às vezes NEM existe

Botão ativo, item selecionado, card com erro, esse tipo de coisa

Pra isso o ternário resolve dentro do próprio template literal:

// variable
const isActive = true

// component
<p className={`btn ${isActive ? "active" : ""}`}>Some text...</p>

Quando isActive é true a string final vira "btn active"

Quando é false sobra só "btn", que é exatamente o que a gente quer

Repare que o ternário devolve string vazia no else, e não nada, isso faz diferença (já já tu vai ver o porquê)

Tome cuidado com o && dentro do template literal:

Esse é o erro clássico, e ele não quebra nada, só suja o seu HTML

// isso pode te trair
<p className={`btn ${isActive && "active"}`}>Some text...</p>

Com isActive valendo false, o template literal converte o valor pra texto

Resultado no elemento: className="btn false"

A mesma coisa acontece com variável que não foi preenchida, aí tu ganha um lindo "btn undefined" no seu HTML

Já me ferrei uma vez procurando classe fantasma no inspetor por causa disso, haha

A saída é simples: ou usa o ternário com string vazia, ou monta a lista de classes com array (é o próximo bloco)

Quando são MUITAS classes: array no lugar do template literal

Template literal é ótimo pra duas ou três classes

Quando passa disso a linha vira uma sopa, com ternário dentro de ternário e espaço sobrando no meio

Aí a jogada é montar um array e juntar tudo no final:

const classes = [
"btn",
isActive && "active",
size && `btn-${size}`
]
.filter(Boolean)
.join(" ")

<p className={classes}>Some text...</p>

O filter(Boolean) joga fora tudo que der false, undefined, null ou string vazia

O join(" ") cola o que sobrou com um espaço entre cada classe

Sem espaço duplo, sem "false" perdido no meio, e dá pra ler a regra de cada classe linha por linha 🙂

O caso que mais aparece hoje: componente que RECEBE a classe de fora

Quando este post saiu, o cenário comum era classe fixa + variável no mesmo arquivo

Hoje tu monta um componente reutilizável e quem usa ele quer poder adicionar classe por fora, sem perder o estilo base

A ideia é a mesma, só que a classe dinâmica chega por props:

function Botao({ className = "", children }) {
return (
<button className={`btn ${className}`}>{children}</button>
)
}

// usando o componente
<Botao className="btn-large">Enviar</Botao>

O valor padrão de string vazia no className é o detalhe que salva

Sem ele, quem usar o Botao sem passar classe nenhuma vai receber "btn undefined" no HTML

É o mesmo cuidado do bloco anterior, só que agora a variável vem de outro arquivo, e tu não controla quem chama

Uma função sua pra não repetir isso em todo componente:

Se tu percebeu que está copiando o mesmo filter + join em dez arquivos, extrai

Nada de fórmula mágica, são três linhas:

function cn(...classes) {
return classes.filter(Boolean).join(" ")
}

// usando
<p className={cn("btn", isActive && "active")}>Some text...</p>

O …classes junta tudo que tu passar em um array só, aí a função faz a limpeza

Agora o && pode ser usado à vontade, porque o filter come o false antes de virar texto

Guarda essa função num arquivo de utils e importa onde precisar, é o tipo de código que tu escreve uma vez e usa pro resto do projeto =)

E se a classe só deve entrar em certas horas?

Muita gente cai aqui: a classe não é só dinâmica, ela às vezes NEM existe

Botão ativo, item selecionado, card com erro, esse tipo de coisa

Pra isso o ternário resolve dentro do próprio template literal:

// variable
const isActive = true

// component
<p className={`btn ${isActive ? "active" : ""}`}>Some text...</p>

Quando isActive é true a string final vira "btn active"

Quando é false sobra só "btn", que é exatamente o que a gente quer

Repare que o ternário devolve string vazia no else, e não nada, isso faz diferença (já já tu vai ver o porquê)

Tome cuidado com o && dentro do template literal:

Esse é o erro clássico, e ele não quebra nada, só suja o seu HTML

// isso pode te trair
<p className={`btn ${isActive && "active"}`}>Some text...</p>

Com isActive valendo false, o template literal converte o valor pra texto

Resultado no elemento: className="btn false"

A mesma coisa acontece com variável que não foi preenchida, aí tu ganha um lindo "btn undefined" no seu HTML

Já me ferrei uma vez procurando classe fantasma no inspetor por causa disso, haha

A saída é simples: ou usa o ternário com string vazia, ou monta a lista de classes com array (é o próximo bloco)

Quando são MUITAS classes: array no lugar do template literal

Template literal é ótimo pra duas ou três classes

Quando passa disso a linha vira uma sopa, com ternário dentro de ternário e espaço sobrando no meio

Aí a jogada é montar um array e juntar tudo no final:

const classes = [
"btn",
isActive && "active",
size && `btn-${size}`
]
.filter(Boolean)
.join(" ")

<p className={classes}>Some text...</p>

O filter(Boolean) joga fora tudo que der false, undefined, null ou string vazia

O join(" ") cola o que sobrou com um espaço entre cada classe

Sem espaço duplo, sem "false" perdido no meio, e dá pra ler a regra de cada classe linha por linha 🙂

O caso que mais aparece hoje: componente que RECEBE a classe de fora

Quando este post saiu, o cenário comum era classe fixa + variável no mesmo arquivo

Hoje tu monta um componente reutilizável e quem usa ele quer poder adicionar classe por fora, sem perder o estilo base

A ideia é a mesma, só que a classe dinâmica chega por props:

function Botao({ className = "", children }) {
return (
<button className={`btn ${className}`}>{children}</button>
)
}

// usando o componente
<Botao className="btn-large">Enviar</Botao>

O valor padrão de string vazia no className é o detalhe que salva

Sem ele, quem usar o Botao sem passar classe nenhuma vai receber "btn undefined" no HTML

É o mesmo cuidado do bloco anterior, só que agora a variável vem de outro arquivo, e tu não controla quem chama

Uma função sua pra não repetir isso em todo componente:

Se tu percebeu que está copiando o mesmo filter + join em dez arquivos, extrai

Nada de fórmula mágica, são três linhas:

function cn(...classes) {
return classes.filter(Boolean).join(" ")
}

// usando
<p className={cn("btn", isActive && "active")}>Some text...</p>

O …classes junta tudo que tu passar em um array só, aí a função faz a limpeza

Agora o && pode ser usado à vontade, porque o filter come o false antes de virar texto

Guarda essa função num arquivo de utils e importa onde precisar, é o tipo de código que tu escreve uma vez e usa pro resto do projeto =)