Por alum motivo, os cards ficaram alinhados verticalmente ao invés de horizontalmente.
Link para o repositório no meu Github: https://github.com/yancarlo0202/ola-mundo/blob/master/src/paginas/Inicio/index.js
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Por alum motivo, os cards ficaram alinhados verticalmente ao invés de horizontalmente.
Link para o repositório no meu Github: https://github.com/yancarlo0202/ola-mundo/blob/master/src/paginas/Inicio/index.js
Oii, Yan!
Verifiquei aqui e tá tudo certinho:
Você deve ter encontrado o erro. Parabéns!
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
o erro é dentro do card, na seção de recomendados. Os cards estão alinhados vertcialmente ao invés de horizontalmente.
Oii, Yan!
Agora entendi. Verifiquei o erro aqui:
Nome incorreto no import do CSS module e no nome do arquivo
Seu código:
import styles from './Post.modules.css';
Código correto:
import styles from './Post.module.css';
Ajuste o import e o nome do arquivo, pos ambos estão com a grafia errada Post.modules.css.
O React (usando ferramentas como Webpack ou Vite) só trata o CSS como CSS Modules se o arquivo terminar com .module.css.
Ou seja:
Post.module.css // estilos aplicados como módulos, com escopo isolado
Post.modules.css // tratado como CSS comum, os estilos não são aplicados via objeto `styles`
O que é CSS Module?
É um recurso que permite importar o CSS como um objeto JavaScript, onde cada classe vira uma propriedade. Isso evita conflito de nomes e garante que os estilos fiquem escopados ao componente.
Exemplo:
/* Post.module.css */
.tituloOutrosPosts {
color: red;
}
import styles from './Post.module.css';
<h2 className={styles.tituloOutrosPosts}>Título</h2>
Nesse caso, o React compila a classe tituloOutrosPosts com um nome único (ex: Post_tituloOutrosPosts__8A4Rt), evitando conflitos com outros arquivos CSS.
Se o nome estiver errado (como .modules.css):
styles será vazio ou undefined.className={styles.minhaClasse} não funcionarão.Resumo: o sufixo .module.css é obrigatório para que o React entenda que você quer usar CSS Modules e consiga aplicar os estilos corretamente via styles.nomeDaClasse.
Espero ter ajudado a entender o motivo do erro.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!