CSS Modules 的:global2种使用方法
局部类中使用全局类名
base.scss
定义了动画rotate
@keyframes rotate {
0% {
transform: rotate(0)
}
100% {
transform: rotate(360deg)
}
}
-
Player.module.scss
中使用rotate
此时rotate会被加上hash,导致动画不生效, 因为rotate被加上了hash -
可以使用 :global来解决,
// .playing 会被提升为全局样式
:global(.playing) {
animation: rotate 20s linear infinite
}
// .playing仍未局部样式,rotate确不会被加上hash
.playing :global {
animation: rotate 20s linear infinite
}
转载自:https://juejin.cn/post/7158434582080012324