Como adicionar múltiplas classes no JSX

Neste artigo você aprenderá a como adicionar múltiplas classes no JSX do React, dentro dos atributos do elemento!

Fala programador(a), beleza? Bora aprender mais sobre como utilizar o React!

Ao desenvolver aplicações React, é comum a necessidade de adicionar múltiplas classes CSS a um único elemento JSX.

Isso pode ser útil para aplicar diferentes estilos a um componente, dependendo de várias condições ou estados.

Neste artigo, vamos explorar diferentes maneiras de adicionar múltiplas classes a um elemento JSX em um aplicativo React.

Adicionando Múltiplas Classes em JSX: A abordagem básica

A maneira mais direta de adicionar várias classes a um elemento JSX é passar uma string com todas as classes separadas por um espaço.

Aqui está um exemplo simples de como você pode fazer isso:

const MyComponent = () => {
    return <div className="class1 class2 class3">Hello, World!</div>;
};

Utilizando Template Strings

Uma maneira mais flexível de adicionar várias classes é utilizando template strings do ES6.

Com template strings, você pode adicionar classes dinamicamente, baseando-se em condições ou variáveis.

Veja o exemplo abaixo:

const MyComponent = ({ isActive }) => {
    const activeClass = isActive ? 'active' : '';
    return <div className={`class1 class2 ${activeClass}`}>Hello, World!</div>;
};

No exemplo acima, se a prop isActive for verdadeira, a classe active será adicionada ao div. Caso contrário, nenhuma classe extra será adicionada.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Utilizando Array

Outra maneira de adicionar várias classes em JSX é usando um array de strings. Depois, você pode juntar todas as strings do array em uma única string com o método join(' ').

Este método é especialmente útil quando você tem muitas classes para adicionar e/ou as classes são dinâmicas.

const MyComponent = ({ isActive }) => {
    const classes = ['class1', 'class2'];

    if (isActive) {
        classes.push('active');
    }

    return <div className={classes.join(' ')}>Hello, World!</div>;
};

Utilizando Bibliotecas Externas

Se você estiver trabalhando em um projeto grande e complexo, pode considerar o uso de uma biblioteca externa para gerenciar classes.

Uma biblioteca popular para isso é a classnames, que oferece uma API simples e flexível para concatenar classes.

Primeiro, você precisará instalar a biblioteca com o comando npm install classnames. Depois, você pode usá-la da seguinte maneira:

import classNames from 'classnames';

const MyComponent = ({ isActive }) => {
    return (
        <div
            className={classNames('class1', 'class2', {
                active: isActive,
            })}
        >
            Hello, World!
        </div>
    );
};

No exemplo acima, as classes class1 e class2 serão sempre aplicadas, enquanto a classe active será aplicada apenas se isActive for verdadeiro.

Usando Objeto para Gerenciar Classes

Além das técnicas mencionadas acima, é possível usar um objeto para gerenciar as classes de um componente.

Esta abordagem é especialmente útil quando se tem um número maior de classes e estas são dependentes de várias condições.

const MyComponent = ({ isActive, isError }) => {
    const classes = {
        'class1': true,
        'class2': true,
        'active': isActive,
        'error': isError
    };

    return <div className={classNames(classes)}>Hello, World!</div>;
};

No exemplo acima, o objeto classes define quais classes devem ser aplicadas ao elemento. As classes class1 e class2 serão sempre aplicadas, pois seus valores são definidos como true.

As classes active e error serão aplicadas dependendo das props isActive e isError, respectivamente.

Classes Baseadas em Estados do Componente

Frequentemente, as classes de um elemento são baseadas em estados do componente. Aqui está um exemplo de como você pode implementar isso:

import { useState } from 'react';
import classNames from 'classnames';

const MyComponent = () => {
    const [isClicked, setIsClicked] = useState(false);

    const handleClick = () => {
        setIsClicked(!isClicked);
    };

    return (
        <div
            className={classNames('myClass', { 'myClass--active': isClicked })}
            onClick={handleClick}
        >
            Hello, World!
        </div>
    );
};

Neste exemplo, temos um estado isClicked que é invertido cada vez que o elemento é clicado. A classe myClass--active é aplicada se isClicked é verdadeiro.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Como você pode ver, existem muitas maneiras de adicionar e gerenciar múltiplas classes em JSX quando se trabalha com o React.

Essas técnicas oferecem muita flexibilidade e permitem um alto grau de personalização na aparência dos seus componentes.

No entanto, é importante lembrar que a complexidade adicionada pela gestão dinâmica de classes deve ser equilibrada com a legibilidade e manutenibilidade do código.

Use essas técnicas com sabedoria e seu código será tanto elegante quanto funcional.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.

Resposta rápida: como adicionar múltiplas classes no JSX

O className do JSX recebe uma string, então juntar várias classes é juntar texto, nada além disso

Se as classes são fixas, você escreve todas dentro das aspas separadas por espaço

Se alguma classe depende de uma condição, você monta a string com template string ou junta um array com join(‘ ‘)

E se as condições começarem a virar um monte de if espalhado, aí sim vale trazer uma biblioteca de classes pro projeto

Cada um desses caminhos tá logo abaixo, com código pra você copiar e testar 🙂

Cuidado com o espaço sobrando e com o false virando classe:

Essas duas pegadinhas aparecem sempre que a classe é condicional, e as duas passam despercebidas porque a tela continua parecendo certa

A primeira: quando a condição é falsa na template string, sobra um espaço a mais no HTML final

Visualmente não muda nada, mas atrapalha na hora de comparar string em teste ou em snapshot

A segunda é mais chata, se liga nisso: dentro de um array, um valor falso vai pro join e vira texto

// se isActive for false, sai className="class1 false"

// filtrando antes, sai className="class1"

O filter(Boolean) joga fora tudo que for falso antes de juntar, então undefined, false e string vazia nem chegam no className

É uma linha só e te salva daquele bug que você olha o CSS por vinte minutos sem entender o motivo 😀

E quando o projeto usa CSS Modules?

Esse é o cenário que mais mudou desde que essas dicas viraram padrão: hoje é comum o nome da classe não ser mais um texto literal que você escreve na mão

Com CSS Modules, você importa um objeto e os nomes viram propriedades dele

Ou seja, você não junta ‘class1 class2’, você junta os valores que vieram do import

import styles from './MyComponent.module.css'

const MyComponent = ({ isActive }) => {

return <div className={classes}>Hello, World!</div>
}

A lógica é exatamente a mesma dos exemplos anteriores, muda só a origem do nome

E tem um detalhe que pega muita gente: se você errar o nome da propriedade, ela vem como undefined em vez de estourar erro

Aí o elemento simplesmente renderiza sem estilo nenhum e você fica caçando problema no CSS, quando o problema tava no nome 😛

Qual abordagem escolher em cada caso:

Tem gente que troca tudo por biblioteca no primeiro if, e tem gente que faz template string aninhada até virar um monstro ilegível

O critério que eu uso é simples: quantas condições e quão espalhadas elas estão

Classe fixa, sem condição nenhuma? String direta no className, e acabou

Uma ou duas condições? Template string ou array com filter(Boolean), sem instalar nada no projeto

Muitas condições, ou classe condicional se repetindo em vários componentes? Aí vale uma biblioteca de classes, porque o ganho de legibilidade paga a dependência a mais

E tem uma dica que vale pra qualquer um dos casos: se a linha do className tá ficando longa, tira ela do JSX

const MyComponent = ({ isActive, isError }) => {
.filter(Boolean)
.join(' ')

return <div className={classes}>Hello, World!</div>
}

O JSX volta a ser leitura fácil e a regra da classe fica num lugar só, dá pra testar e dá pra mudar sem mexer no layout

É o mesmo código, só que organizado 😀