Discussion :

[alt184]

Bonjour,
Je dispose d'un composant <Composant> qui importe une feuille de style style.css qui elle-même définit une variable --color initialisée à blanc (couleur).
Le composant est "paramétrable" via ses propriétés, en l'occurrence on peut changer la couleur : <Composant color="red" />. Ce code déclenche la mise à jour de la variable CSS --color avec la propriété transmise.

J'ai besoin de créer plusieurs instances du même composant sur la même page avec des propriétés (couleurs) différentes, et bien sûr ça coince car c'est la dernière couleur définie qui va être utilisée, autrement dit, la dernière modification de la variable CSS l'emporte, ce qui semble logique finalement...

Si j'utilise les composants les uns à la suite des autres, ça fonctionne bien si je définis la propriété couleur. Par contre, une fois modifiée, si je veux utiliser le composant sans spécifier sa couleur (donc en m'attendant à ce que celle-ci soit la valeur par défaut du CSS : blanc), ça ne fonctionne pas. C'est la dernière couleur transmise qui fonctionne. Le problème est que c'est ce comportement qui est le plus fréquent : composant utilisé par défaut, et de temps en temps composant modifié au niveau de la propriété couleur, puis à nouveau par défaut...

J'ai cru comprendre que le CSS était chargé une fois pour toute et ne se comportait à la manière des variables en s'intégrant dans un contexte local au composant. Ai-je bien compris l'origine du problème ?

Et surtout, comment résoudre ce problème, tout en agissant le moins possible sur le code et la structure existante bien sûr... ?

J'ai pensé aux essais suivants que je n'ai pas encore testé car ça oblige à pas mal de modifications :

1. forcer à recharger la feuille de style à chaque nouveau composant (ça permettrait de fonctionner lorsque le composant est utilisé de façon séquentielle) ; notamment en utilisant un équivalent de willUnmount... ;
2. utiliser des états pour garder les styles en mémoire ; j'ai lu quelque part que si l'on pouvait faire un code sans useState, c'est que cette fonctionnalité n'étais pas nécessaire et que c'était aussi bien de s'en passer (je ne sais pas ce que ça vaut, je débute en React !) ;
3. lorsque j'examine les propriétés éventuellement transmises au composant, voir si la couleur est absente, et dans ce cas, redéfinir la variable --color à sa valeur initiale ; mais ça oblige à avoir dans mon fichier de déclaration du composant les valeurs de style initiales qui se trouvent dans le fichier CSS ;
4. dans le cas où le composant fonctionne de façon séquentielle à la manière d'une infobulle ( au survol d'un élément enfant, il affiche une infobulle avec des données sur cet élément, puis lorsque la souris quitte le composant, l'infobulle disparaît), remettre à niveau toutes les propriétés qui ont été modifiées dans la fonction appelée pour cacher le composant ; comme ci-dessus, ça oblige à avoir dans mon fichier de déclaration des composants les valeurs "en dur" des propriétés qui peuvent être modifiées... ;
5. utiliser un module pour le CSS en rebaptisant le fichier style.module.css et en important styles from '../chemin des CSS/style.module.css' ; mais est-ce que ça va faire un fichier par instance ??...

Qu'en pensez-vous ?

[aityahia]

Bonjour,

vous auriez eu plus de réponses et ça aurait été plus facile si vous avez fournis un minimum de code sur lequel on peut travailler.
Sinon pour gérer les styles conditionnels en React vous pouvez utiliser les packages clsx ou classnames pour générer vos classes CSS.

[alt184]

Oui, mais je suis parti sur autre chose. Il y a tellement de choses à découvrir puis maîtriser... !
Mais je reprendrai ce sujet dès que j'aurai un peu de temps et je mettrai un exemple de code.