Falta pouco!

0 dias

0 horas

0 min

0 seg

Confira já seu desconto!
Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Duvidas sobre o CSS desse Componente

Referente ao curso React: configurando e estruturando projetos com Vite, no capítulo Gerenciando estados e atividade Mão na massa: ordenação

por Tayna Silva
| 106.8k xp | 6 posts

Olá boa tarde.
Eu fiz esse componente e consegui chegar no resultado igual ao figma. Uma dúvida que fiquei é que eu observei que quando tento uma classe que já foi utilizada em outro componente, as estilizações não são aplicadas.
Exemplo:

Jsx do componente Ordenação:

import "./styles.css";

export default function Ordenacao() {
  return (
    <section className="container-ordenacao">
      <ul>
        <li>
          <a href="#" className="item__link--ativo">
            {" "}
            Recentes{" "}
          </a>
        </li>
        <li>
          <a href="#" className="item__list">
            {" "}
            Recentes{" "}
          </a>
        </li>
      </ul>
    </section>
  );
}

CSS do componente Ordenação

.item__link--ativo {
  color: var(--verde-destaque);
}

O resultado:
Insira aqui a descrição dessa imagem para ajudar na acessibilidade
Isso aconteceu porque estou repetindo a classe .itemlink--ativo que já estava sendo usada no menu lateral.
Eu pensava que, por estar importando o arquivo styles.css do componente, ele não acessaria os estilos de outras folhas de estilos.
Sabem me dizer o porque isso acontece?

1 resposta
solução!
por Victor Costa Santos
| 2491.9k xp | 5061 posts
Alura Scuba Team

Oi, Tayna, tudo bem?

Sua observação está correta! Isso acontece porque, por padrão, todo CSS importado em um projeto React vai para um escopo global. Assim, uma classe com o mesmo nome (.item__link--ativo) em outro arquivo pode sobrescrever a sua.

Normalmente uma solução mais comum para isso é usar CSS Modules, que "isola" o estilo dentro de cada componente. O processo é simples:

  1. Renomeie o arquivo para styles.module.css.
  2. Importe o arquivo como um objeto: import styles from './styles.module.css';
  3. Aplique as classes usando este objeto, como no exemplo abaixo.

Veja como seu componente fica:

import styles from "./styles.module.css";

export default function Ordenacao() {
  return (
    <section className={styles.containerOrdenacao}>
      <ul>
        <li>
          <a href="#" className={styles.item__link__ativo}>
            Recentes
          </a>
        </li>
        <li>
          <a href="#" className={styles.item__list}>
            Recentes
          </a>
        </li>
      </ul>
    </section>
  );
}

Ao fazer isso, o Vite gera um nome único para cada classe, garantindo que o estilo de um componente não interfira no outro.

Espero ter ajudado! Bons estudos!

Sucesso ✨

Imagem da comunidade