Using css modules how do I define a global class
Ad
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?
Ad
Answer
Ad
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;
}
}
Ad
source: stackoverflow.com
Related Questions
Ad
- → OctoberCMS - How to make collapsible list default to active only on non-mobile
- → How to disable assets combining on development in OctoberCMS
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → How to dynamically add class to parent div of focused input field?
- → Expanding search bar not expanding before search
- → Include external javaScript CSS in laravel 5
- → Using css modules how do I define a global class
- → How to add a timer in HTML5 and Javascript?
- → Conditional BG Color on AngularJS
- → Divs aren't aware of screen resizing
- → Setting the height of a textarea inside a table
- → How can I get Greasemonkey to highlight visited image links?
- → How to handle onclick event of a button?
Ad