ant design组件样式冲突及解决方案
在使用Ant Design的过程中，组件样式隔离是一个常见挑战。本文将针对一个二次封装的Ant Design组件及其子组件的样式冲突问题，提供有效的解决方案。
问题： 开发者封装了一个Ant Design组件A，并使用了:global修饰符修改其样式。然而，组件A包含子组件B，由于:global的全局作用域，导致子组件B的样式被覆盖，失效。如何避免这种样式污染？
解决方案： 直接使用:global容易造成全局样式污染，引发样式冲突。最佳实践是使用更精确的样式选择器，避免不必要的全局覆盖。
建议创建一个自定义父元素类名，并在该类名下使用:global修饰符。这样可以将样式作用域限制在自定义父元素内，避免影响其他组件。
例如，组件A的类名为.ant-a，需要将其颜色修改为红色。 不推荐的做法：
:global(.ant-a) {
color: red;
}
这会修改所有.ant-a元素。 改进后的代码：
.custom-container {
:global(.ant-a) {
color: red;
}
}
通过添加.custom-container类名，样式修改仅限于该类名下的.ant-a元素。 这样，组件B的样式就不会被覆盖，避免了样式冲突。 只需在组件A的父元素上添加custom-container类名即可。 此方法有效避免了:global带来的样式污染，提高了组件样式的独立性和可维护性。
