Currently, I am immersed in a project that makes use of ReactJS and CSS modules, where each React component is paired with a SASS file.
During the CSS writing process, every class is suffixed with a 'triple underscore random string' like this: .myClass__e7G3A
In my application, a class ('top' or 'down') is added to the body tag based on the scroll position, and I want my component to react accordingly.
The issue I'm facing arises when if I include either .top or .down within the CSS module, the unique identifier is also appended to the end of that class.
For instance:
JSX:
<div className={styles.main}>
Main content goes here.
</div>
Rendered HTML:
<body class="top">
<div class="main___iZy2A">
Main content goes here.
</div>
</body>
SASS file:
.top .main {
margin-top: 0;
}
.down .main {
margin-top: 100px;
}
Compiled CSS:
.top___Gvf3S .main___iZy2A {
margin-top: 0;
}
.down___kpd3S .main___iZy2A {
margin-top: 100px;
}
Desired CSS outcome: (.top and .down without unique identifier)
.top .main___iZy2A {
margin-top: 0;
}
.down .main___iZy2A {
margin-top: 100px;
}
I believe there must be a simple solution or identifier that I am overlooking to achieve this. Your assistance would be greatly appreciated. Thank you.