Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

import classNames from 'classnames';

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
| 326.8k xp | 467 posts
Instrutor Instrutor e desenvolvedor de software

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

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