如何优雅地彻底解决 antd 全局样式问题 about blog HOT 9 OPEN

这样做好像 html 和 body 标签下的样式无法指定，主要影响的是 font，antd 的会被全局样式所覆盖。不过如果这点不重要的话，其他样式看起来的都是没什么问题的，感谢提供的方案。

多说一句，antd 4.7.0 里面不再是 base.less 设定全局样式，所有的全局样式都移动到了 global.less 这个文件里，base.less 已经限定了作用域，所以如果要改写 antd.less 的话，需要改成如下内容：

@import '~antd/lib/style/themes/index.less';
@import '~antd/lib/style/mixins/index.less';

*[class*='ant-'] {
    @import '~antd/lib/style/core/global.less';
}

@import '~antd/lib/style/core/base.less';
@import '~antd/lib/style/core/iconfont.less';
@import '~antd/lib/style/core/motion.less';

@import '~antd/lib/style/components.less';

from blog.

虽然确保了antd组件样式不影响全局的，但是提高了antd样式的层级，导致后面如果要写自己的私有样式，一个类根本不够，会被antd的[class *=ant-]h1这种的覆盖掉

直接 !important

from blog.

用 patch-package 打个补丁，直接将 node_modules/antd/lib/style/core/index.less 改成下面这样就行：

@import '../mixins/index';
@import 'base';
*[class*='ant-'] {
    @import 'global';
}
@import 'iconfont';
@import 'motion';

步骤少，很方便。

from blog.

挂个私人链接：
https://www.yuque.com/zhongjing-tfizt/darkness/ihl4ef

from blog.

虽然确保了antd组件样式不影响全局的，但是提高了antd样式的层级，导致后面如果要写自己的私有样式，一个类根本不够，会被antd的[class *=ant-]h1这种的覆盖掉

from blog.

不错的方案，学习了

from blog.

用 patch-package 打个补丁，直接将 node_modules/antd/lib/style/core/index.less 改成下面这样就行：

@import '../mixins/index';
@import 'base';
*[class*='ant-'] {
    @import 'global';
}
@import 'iconfont';
@import 'motion';

步骤少，很方便。

兄弟，试了下，不行呀，和antd版本有关系吗？

from blog.

用 patch-package 打个补丁，直接将 node_modules/antd/lib/style/core/index.less 改成下面这样就行：

@import '../mixins/index';
@import 'base';
*[class*='ant-'] {
    @import 'global';
}
@import 'iconfont';
@import 'motion';

步骤少，很方便。

兄弟，试了下，不行呀，和antd版本有关系吗？

应该没关系，你按照 patch-package 的文档操作，生成 patches 文件夹及对应的文件了吗？

from blog.

我写了一个less插件来自动移除antd的全局样式antd/lib/style/core/global.less： https://github.com/csr632/less-plugin-remove-antd-global-styles
能够与vite, webpack, rollup以及babel-plugin-import一起使用。

from blog.