我正在开发一个使用 ReactJS 和 CSS 模块的项目,每个反应组件都有一个相应的 SASS 文件。
在编写 CSS 时,每个类都会附加“三重下划线随机字符串”,例如.myClass__e7G3A
我的应用程序根据滚动位置将类(顶部或向下)附加到正文标记,我希望我的组件对此做出响应。
我遇到的问题是,如果我在 CSS 模块中添加.top
或添加.down
,那么它也会将唯一标识符附加到该类的末尾。
例如
JSX:
<div className={styles.main}>
Main content goes here.
</div>
呈现的 HTML:
<body class="top">
<div class="main___iZy2A">
Main content goes here.
</div>
</body>
SASS 文件:
.top .main {
margin-top: 0;
}
.down .main {
margin-top: 100px;
}
编译的CSS:
.top___Gvf3S .main___iZy2A {
margin-top: 0;
}
.down___kpd3S .main___iZy2A {
margin-top: 100px;
}
所需的 CSS 结果:(并且.top
没有.down
唯一标识符)
.top .main___iZy2A {
margin-top: 0;
}
.down .main___iZy2A {
margin-top: 100px;
}
我确定我只是缺少一个简单的标识符或可以实现此目的的东西。
希望你能帮忙。谢谢。