Uma dúvida bugada

Olá, Liana!

Pelo que eu entendi rs, você está com dúvida sobre a diferença entre usar "ClassName={styles.Banner}" e "ClassName="Banner"" com o import opaco. Vou tentar explicar para você.

Quando você utiliza o "ClassName={styles.Banner}", você está referenciando uma classe CSS específica do arquivo "banner.module.css". Essa classe contém as propriedades de estilização que serão aplicadas ao elemento HTML.

Por outro lado, quando você utiliza "ClassName="Banner"", você está apenas atribuindo uma classe CSS diretamente ao elemento HTML, sem a necessidade de importar um arquivo de estilos separado. Nesse caso, a classe "Banner" deve ser definida em algum lugar do seu código ou de algum arquivo CSS global.

A diferença principal é que, ao utilizar o "import opaco" e não referenciar o arquivo de estilos, você perde todas as estilizações definidas no arquivo "banner.module.css". Isso explica por que a página perde toda a estilização quando você remove o import.

Portanto, para que a estilização seja aplicada corretamente, é importante utilizar o "ClassName={styles.Banner}" e manter o import do arquivo de estilos.

Espero ter ajudado e Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Oi, Liana, tudo bem?

O motivo da sintaxe styles.nomeDaClasse não estar funcionando é porque o nome do seu arquivo está Banner-module.css. Para utilizar o recurso de Módulos CSS no React, o arquivo obrigatoriamente precisa terminar com a extensão .module.css.

Dessa forma, você pode renomear o arquivo Banner-module.css para Banner.module.css. Além disso, atualize a importação import styles from './Banner-module.css' para import styles from './Banner-module.css'.

Assim, você conseguirá utilizar corretamente a sintaxe styles.nomeDaClasse. Na imagem, você poderá escrever className={styles.circuloColorido}.

Note que você também precisará utilizar essa mesma sintaxe nos outros elementos da página. Por exemplo, um dos parágrafo está com className="paragrafo", mas você precisará trocar para className={styles.paragrafo}.

Por fim, o motivo de estar funcionando antes, quando você estava usando o import styles from './Banner-module.css', é que, como o arquivo não foi definido corretamente como um módulo CSS, a variável styles também não é definida. No entanto, os estilos do arquivo Banner-module.css ainda são levados em consideração, como se você estivesse importanto um arquivo CSS normalmente.

Dessa forma, com essa sintaxe anterior, os elementos funcionariam apenas se você aplicasse a sintaxe className="nomeDaClasse". Note que nesse caso você não está desfrutando dos módulos CSS, o que poderia levar a conflitos de classes CSS em diferentes arquivos.

Em suma, o ideal é utilizar a importação nesse formato:

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

E usar a seguinte sintaxe dos Módulos CSS:

className={styles.nomeDaClasse}

Espero ter ajudado!

Que confuso né kkk mas estou pegando o jeito, com bastante prática vai entendendo aos poucos =) Muito obrigada