likes
comments
collection
share

CSS Modules 的:global2种使用方法

作者站长头像
站长
· 阅读数 20

局部类中使用全局类名

  1. base.scss 定义了动画 rotate
            @keyframes rotate {
              0% {
                transform: rotate(0)
              }

              100% {
                transform: rotate(360deg)
              }
            }
  1. Player.module.scss 中使用 rotate 此时rotate会被加上hash,导致动画不生效, 因为rotate被加上了hash CSS Modules 的:global2种使用方法

  2. 可以使用 :global来解决,

            // .playing 会被提升为全局样式
            :global(.playing) {
               animation: rotate 20s linear infinite
            }
            // .playing仍未局部样式,rotate确不会被加上hash
            .playing :global {
               animation: rotate 20s linear infinite
            }

CSS Modules 的:global2种使用方法