如何修改antd默认全局样式

在研究antd-pro的时候,发现了:global{}这样的写法,没明白是什么意思,遂百度之。经查后发现,这是修改全局样式的写法。比如我在antd-pro中看到的:

:global {
    .ant-tag {
      margin-right: 24px;
      padding: 0 8px;
      font-size: @font-size-base;
    }
  }

上面代码就是要修改antd原有的.ant-tag的样式,于是在外面加了一层:global包裹起来。

然而为了避免修改全局样式后影响其它代码的展示,还需要在:global外层再包裹一层本业务模块中的类,如下:

.tagSelect {
    :global {
    .ant-tag {
      margin-right: 24px;
      padding: 0 8px;
      font-size: @font-size-base;
    }
  }
}

这样,被修改的.ant-tag就只在.tagSelect下才生效了。

(本人运营了一个有关web前端的公众号,旨在为web前端刚入门的同学讲解一些基础知识和学习方法,希望能得到同样为实现前端梦而努力的你的支持,扫码关注一下,感激不尽)

如何修改antd默认全局样式_第1张图片

你可能感兴趣的:(css,react)