在React项目中,样式语言无论是用scss或less,如果想让 样式 仅作用在某个组件,而不影响全局,一般都会把样式文件进行模块化,即打包后每个class名都会被自动加上一串唯一的序列号。

假如 想让某个class不加序列号,可以作用到其他组件,那么就写到 :global { ... } 中即可,如下图的例子:

/* 在test.module.scss文件中 */
.main {
  width: 100px;
  :global {
    .ant-popover-title{
        color: red;
    }
  }
}

打包完的结果:

.main__3D0Xe{ width: 100px; }

.main__3D0Xe .ant-popover-title{
    color: red;
}

可以看到,main后面自动追加了一串唯一的序列号,而ant-popover-title则没有,这样在main元素中其他任何组件,只要用到ant-popover-title这个class,字体都会变成红色。

参考:CSS Modules 用法教程(阮一峰)

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐