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