import classNames from 'classnames'; | React: conhecendo a biblioteca React Router

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

Referente ao curso React: conhecendo a biblioteca React Router, no capítulo Router DOM Hooks e atividade Criando o NotFound

por João Vitor de Abreu Sousa

| 169.2k xp | 86 posts

Auxiliar Administrativo


import {ReactComponent as NotFoundImage} from 'assets/not_found.svg'; 
import styles from './NotFound.module.scss'; 
import stylesTema from 'styles/Tema.module.scss';
import classNames from 'classnames';

export default function NotFound(){
    return(
        <div className={classNames({
            [styles.container]: true,
            [stylesTema.container]: true 

        })}>
            <NotFoundImage/>
        </div>
    )
}

Ainda não ficou muito claro para mim o porque de ter que importar classNames... Qual sua funcionalidade?

2 respostas

solução!

por Neilton Seguins

| 320.2k xp | 466 posts

Instrutor Instrutor e desenvolvedor de software

15/12/2022

Fala, João! Tudo bem?

Então, o uso da biblioteca classNames é principalmente para facilitar trabalhar com classes condicionalmente. Sabe quando você tem um estilo que você quer adicionar em um elemento caso algo aconteça ou não? Pois é, você provavelmente teria que utilizar uma template string e operador ternário para verificar uma condição e adicionar a determinada classe.

Com o classNames você não precisa fazer dessa maneira, você pode adicionar essas classes condicionalmente de forma simples como um objeto. No exemplo da aula, ao invés de ser:

<div className={`${styles.container} ${stylesTema.container}`}>

Fica bem mais simples se for

<div className={classNames({
            [styles.container]: true,
            [stylesTema.container]: true 

        })}>

Abraços!

por João Vitor de Abreu Sousa

| 169.2k xp | 86 posts

Auxiliar Administrativo

15/12/2022

Muito obrigado Neilton, essa solução do classNames é eficiente mesmo haha!