Ant Design组件样式冲突及解决方案
在Ant Design开发中，自定义组件样式时，常常会遇到样式冲突问题，尤其是在对组件进行二次封装并修改样式时。 滥用:global修饰符全局修改样式，容易导致子组件样式被覆盖。例如，封装组件A包含子组件B，修改A的样式却影响了B的样式。
问题根源在于:global修饰符会将样式应用于全局作用域，从而覆盖子组件的局部样式。
如何避免样式冲突？关键在于避免使用全局选择器，采用更精准的样式选择器。
解决方案：避免直接使用:global修改全局类名，而是创建自定义父元素类名，然后在该类名下使用:global。这样可以将样式作用域限制在自定义父元素内，避免影响其他组件。
例如，原代码：
:global(.ant-a) {
color: red;
}
改进后的代码：
.custom-class {
:global(.ant-a) {
color: red;
}
}
通过这种方法，样式被限定在.custom-class内，避免了样式污染，确保组件A和子组件B的样式都能正常生效。即使修改组件A的样式，子组件B的样式也不会受到影响。 记住，精准的样式选择器是解决样式冲突的关键。
