J'essaie d'obtenir des couleurs différentes pour différents titres dans différents composants avec une application réactive.
J'ai envoyé le CSS en deux fichiers CSS différents, mais la couleur H1 qui est appliquée est la même (la dernière valeur lue) Pour les deux titres H1. p> dans chaque composant, j'ai la ligne d'importation CSS correspondante: P > import "./ComponentOne.module.css";
5 Réponses :
Utilisez plutôt la nom de classe. Puisque 
La raison pour laquelle il ne choisit que le bleu n'est que parce que le navigateur ne se soucie pas de ce que CSS est dans quel fichier, il va simplement tout lire, et s'il existe déjà un style pour un Dans votre cas, la couleur rouge est écrasée et que tout le H1 devient bleu Ceci C'est pourquoi sa très mauvaise pratique pour simplement écraser toutes les instances d'un type d'élément spécifique. Au lieu de cela, c'est ce que vous devriez faire, c'est envelopper votre code dans une div / span avec une carte d'identité / classe comme celle-ci: et ensuite au lieu de coiffer tous les h1 de partout sur la page, Vous pouvez styler tous les H1 qui sont contenus dans un élément avec une pièce d'identité. Vous pouvez faire cela comme celui-ci H1 , puis Il trouve un style différent pour un H1 il écrasera simplement le style précédent.
Je crois que sans un pré-processeur supplémentaire JavaScript ne parviendra pas à vos fichiers CSS à des composants spécifiques. Cela inclura simplement les deux fichiers à la sortie de l'application CSS. Et comme le deuxième et dernier module chargé réglaient la couleur en bleu, il remplace le premier.
Vous devrez identifier les deux composants par une classe ou une carte d'identité afin que vous puissiez appliquer les styles de manière conditionnelle.
ce n'est pas seulement le pré-processeur si vous incluez les fichiers CSS manuellement à l'aide de
@Luke_ J'utilise Svelte et le pré-processeur attache des styles aux composants utilisant des identifiants et des classes spécifiques à un composant unique. Si théoriquement c'est possible.
Ohhh tu as dit sans pré-processeur supplémentaire ... Je l'ai mal compris comme avec un pré-processeur supplémentaire (comme dans, vous pensez que c'est causé par un pré-processeur de ReactJS). Je suis désolé, ignore-moi juste ... Passez une bonne journée Sanger! :)
Cette solution semble super. J'ai essayé d'ajouter Pré-processeur Sass mais cela ne fonctionne toujours pas.
Honnêtement, je pense que vous devriez aller avec la solution de @ Shubhamverma. C'est simple, élégant et explicite de soi.
Ajouter un style en ligne par exemple: ou vous pouvez également modifier de manière programmative le style
Il y a un problème dans lequel lorsque vous utilisez un module Dans votre cas, vous devez aimer ceci: p> où Heading Code> est votre nom de classe. P> Code complet: P> CSS CODE> Vous devez importer ces classes code> et devez l'utiliser là-bas. Vous ne pouvez pas l'utiliser sur Tag code> ou éléments code>. Pour cela, vous devez utiliser styled-composant code> ou toute bibliothèque similaire.
.heading {
color: red;
}
C'est en fait une solution vraiment belle.