Search code examples
cssreactjscss-modules

Using css modules how do I define a global class

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?

Solution

  • 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;
    }   
}