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.

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.