如何修改antd默认全局样式

最新推荐文章于 2024-06-03 09:08:33 发布

垃圾侠

最新推荐文章于 2024-06-03 09:08:33 发布

阅读量1w

点赞数 2

分类专栏： css react

本文链接：https://blog.csdn.net/xiao1215fei/article/details/106543932

版权

9 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

在研究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前端刚入门的同学讲解一些基础知识和学习方法，希望能得到同样为实现前端梦而努力的你的支持，扫码关注一下，感激不尽）

关注