Restreindre importés CSS composant donné

Question

Je suis en train de construire sur le côté admin de ma première application React, qui a été commencé avec créer une réaction-app (aussi-composants si style il importe dans ce cas).

Au lieu de créer mon propre admin personnalisé, j'utilise Semantic UI React. Une partie de cette implique l'importation de la styles:

import 'semantic-ui-css/semantic.min.css';

que je fais dans mon élément conteneur d'administration. Le problème que je rencontre est que, une fois que j'importe ces styles, les sélecteurs globaux sont appliqués à l'échelle du site, même si je ne les veux que du côté admin des choses.

Existe-t-il une pratique standard pour restreindre les styles importés à une zone donnée de votre application? Je ne suis pas familier avec ça.

Answer 1

Vous devez utiliser un chargeur de style prenant en charge les spécifications des modules CSS.

Ce chargeur nommerait les classes css de votre composant avec une classe unique parent. Cela empêcherait vos classes CSS de fuir vers l'espace de noms global. Par exemple, j'avais utilisé un chargeur de style isomorphe de kriasoft qui l'a fait.