Pourquoi les projets React doivent-ils hériter des modules CSS en arrière-plan dans la portée des composants ?

Question

J'ai créé un composant React, mais il y a eu un problème, l'ensemble du site Web a hérité du style de corps que j'ai défini dans un module CSS. J'ai essayé cela avec et sans la balise locale, et j'ai l'impression que cela pourrait avoir quelque chose à voir avec la façon dont React encapsule les modules CSS, car je n'ai vu personne d'autre avoir le même problème.

:corps local
{
    affichage : flexible ;
    justifier-contenu : centre ;
    aligner les éléments : centre ;
    hauteur min : 100vh ;
    arrière-plan : #300d25 ;
    transition : 0,5 s ;
}
:organisme local::avant
{
    contenu:'';
    position : absolue ;
    haut : 0 ;
    gauche : 0 ;
    largeur : 100 % ;
    hauteur : 100 % ;
    arrière-plan : #30bfa5 ;
    transition : 0,5 s ;
    chemin du clip : cercle (250 px au centre) ;
}

Answer 1

Vous avez créé un composant React avec les modules CSS associés, mais les styles que vous avez définis dans l'un des modules CSS semblent affecter l'ensemble du site et pas seulement le composant. Ce problème peut être dû à une utilisation incorrecte des modules CSS, à des conflits de noms de classe, à des styles globaux, à des fautes d'orthographe, à des extensions de navigateur ou à des problèmes spécifiques au CSS. Pour résoudre ce problème, assurez-vous de nommer et d'utiliser correctement les modules CSS, vérifiez les conflits et les fautes de frappe, examinez les styles globaux, utilisez la réinitialisation ou la normalisation CSS, vérifiez les styles appliqués et vérifiez la configuration de votre Webpack. Si le problème persiste, pensez à fournir plus de détails pour un dépannage spécifique.