Using css modules how do I define a global class

Question

I am using css modules, however a library I use in a component to append tweets with JavaScript adds some elements to my component in the following structure:

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

I want to now style these elements in my css module for the component, as follows:

MyComponent.css

.user {
 /* styles */
}

.tweet {
 /* styles */
}

However of course now my .user class changes to .MyComponent__user___HZWfM due to the hash naming in the webpack loader.

How can I set a global style in my css module?

Chieh · Accepted Answer · 2019-04-27 14:06:50Z

36

According to the css modules docs, :global switches to the global scope for the current selector. e.g. :global(.example-classname)

So this should work:

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

Or define a global block

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

edited Apr 27, 2019 at 14:06

Chieh

335 bronze badges

answered Dec 15, 2015 at 1:30

svnm

24.6k24 gold badges96 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

howard Over a year ago

It's better to probably combine the css if they are intended to be the same with something like :global(.tweet), :global(.user) { text-align: left }

GMKHussain · Accepted Answer · 2022-06-09 10:22:21Z

3

Can use module class with static class with this way.

myStyle.module.css

.moduleClass_g1m59k:global(.StaticClass) {
    background-color: orange;
}

Output will generate like this

.moduleClass_g1m59k.StaticClass {
    background-color: orange;
}

answered Jun 9, 2022 at 10:22

GMKHussain

4,8151 gold badge36 silver badges22 bronze badges

Comments

Anthony Cregan · Accepted Answer · 2016-11-20 21:37:15Z

Many people have struggled with this and there doesn't seem to be any one agreed upon solution. The one I have settled with involves some tweaking of your bundler and specifically addresses the need to import libraries as-is without having to wrap them or edit them manually.

In my webpack config I have set it to scan all files ending css except those within the 'node_modules' and 'src/static' folders. I import my libraries from here and they dont suffer the classname transforms so I am free to use regular classnames for global css and the className={styles.element} convention as usual for modular css (which will compile down to .component_element__1a2b3 or something similar).

Here is an example of a working production webpack config with this solution: http://pastebin.com/w56FeDQA

Collectives™ on Stack Overflow

Using css modules how do I define a global class

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related