Entrar Ainda não tem acesso?
1
resposta

Dúvida sobre conflito de ClassName

Referente ao curso React: desenvolvendo com JavaScript

por Dirceu dos Santos Lima Junior
| 149.9k xp | 5 posts
Engenheiro Eletricista

Olá,

No desafio do curso para criar o rodapé, criei a estrutura sugerida com uma pasta chamada Rodape, um index.js e um arquivo Rodape.css e fiz o import de acordo com as instruções.

Na estrutura do index.js, criei uma div com uma ClassName chamada rodape.

Porém ela deu modificou o Card dos colaboradores que também tinha a mesma ClassName.

Esse é o comportamento normal do React?

Quando coloquei outro nome para a ClassName do rodapé (footer), o card voltou a configuração normal.

Pensei que por estarem em pastas e arquivos CSS diferentes, não haveria esse problema.

1 resposta
por Estudante
| 568.5k xp | 1338 posts

Oi

O React não interfere diretamente no escopo das classes CSS; ele apenas renderiza os elementos HTML conforme definido nos componentes. Portanto, se você estiver enfrentando um conflito de classes, é mais provável que seja um problema no lado do CSS.

Aqui estão algumas sugestões para resolver ou evitar esse tipo de conflito:

  1. Nomes de classe únicos: Certifique-se de que os nomes de classe que você utiliza em diferentes componentes são únicos. Isso ajuda a evitar conflitos.

  2. Escopo de classe: Considere usar algum método de escopo para suas classes CSS. Se você estiver usando módulos CSS (por exemplo, com o webpack e o css-modules), as classes serão automaticamente localizadas no escopo do componente.

  3. Prefixos de classe: Adicione prefixos exclusivos para suas classes. Por exemplo, em vez de ter apenas rodape, você pode usar algo como rodape-xxx e card-xxx. Isso reduz a probabilidade de conflitos.

  4. Estilo específico para o componente: Se você deseja ter estilos específicos para um componente, evite usar nomes de classes genéricos que possam ser reutilizados em outros lugares sem intenção.

Ao seguir essas práticas, você deve conseguir evitar conflitos de classes CSS em seu aplicativo React. Certifique-se de que cada componente tenha estilos distintos e que os nomes de classes sejam exclusivos o suficiente para evitar interferências indesejadas.