Navela Navela - 12 days ago 5
CSS Question

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?

Answer

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

So this should work:

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