'CSS Modules - Mark/wrap whole file in :global

I have a huge complicated file, I don't want to go to each line and add :global(.......). Is it possible to mark the whole file global?



Solution 1:[1]

I think you need to add :global on each class to say that you are referring to the global instance of it. There is no other way =/

But if you need to override a lot of global classes, it probably means that the application CSS structure should be refactored or your components should be different.

If you are using React, you can try to do similar to Material-UI: https://v4.mui.com/customization/components/#overriding-styles-with-classes

Your component can receive a prop classes, that would receive an object with the CSS classes of your parent component module and apply it internally at the desired specific part of it (root, label, and so on). So, your parent component can pass the local CSS class as prop to the child component, without needing to override any global CSS.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1