L'utilisation des modules css Comment définir une classe mondiale

Question

J'utilise des modules css, mais une bibliothèque que j'utilise dans un composant pour ajouter des tweets avec JavaScript ajoute des éléments à mon composant dans la structure suivante:

<div class='user'></div> 
<div class='tweet'></div> 

Je veux le style maintenant ces éléments dans mon module css pour le composant, comme suit:

MyComponent.css

.user { 
/* styles */ 
} 

.tweet { 
/* styles */ 
} 

Cependant, bien sûr, ma classe .user passe maintenant à .MyComponent__user___HZWfM en raison de la dénomination de hachage dans le chargeur Webpack.

Comment puis-je définir un style global dans mon module css?

Answer 1

Selon le css modules docs, :global passe à l'étendue globale pour le sélecteur en cours. par exemple. :global(.xxx)

Donc cela devrait fonctionner:

:global(
    .tweet { 
     text-align: left; 
    } 
    .user { 
     text-align: left; 
    } 
) 

Answer 2

Beaucoup de gens ont du mal avec cela et il ne semble pas être une solution convenue. Celui avec lequel je me suis installé implique quelques réglages de votre bundler et répond spécifiquement à la nécessité d'importer les bibliothèques telles quelles sans devoir les envelopper ou les éditer manuellement.

Dans ma configuration webpack, je l'ai paramétré pour analyser tous les fichiers se terminant par css sauf ceux qui se trouvent dans les dossiers 'node_modules' et 'src/static'. J'importe mes bibliothèques d'ici et ils ne subissent pas les transformations de nom de classe, donc je suis libre d'utiliser les noms de classes pour css global et la convention className = {styles.element} comme d'habitude pour css modulaire (qui sera compilé jusqu'à .component_element__1a2b3 ou quelque chose de similaire).

Voici un exemple d'une configuration de production webpack travailler avec cette solution: http://pastebin.com/w56FeDQA