解决Ant Design组件样式冲突问题

在使用Ant Design时，样式冲突是一个常见问题，特别是当使用:global修饰符时可能导致意外的样式覆盖。以下是几种有效的解决方案：

1. 使用CSS Modules

CSS Modules是最推荐的解决方案，它可以自动生成唯一的类名：

// 使用方式
import styles from './MyComponent.module.less';

function MyComponent() {
  return <div className={styles.container}>内容</div>;
}

/* MyComponent.module.less */
.container {
  /* 你的样式 */
}

2. 使用更具体的类选择器

避免使用:global，而是通过更具体的类选择器来限定样式范围：

.my-custom-wrapper {
  .ant-btn {
    /* 只影响这个wrapper内的按钮 */
  }
}

3. 使用命名空间

为你的样式添加特定前缀作为命名空间：

.my-app {
  &-btn {
    /* 样式 */
  }
}

4. 谨慎使用:global

如果必须使用:global，请限定其范围：

:global {
  .ant-btn {
    /* 这会全局影响所有按钮 */
  }
}

/* 更好的做法 */
.my-global-override {
  :global {
    .ant-btn {
      /* 更受控的全局覆盖 */
    }
  }
}

5. 使用styled-components或emotion

这些CSS-in-JS解决方案可以自动处理样式隔离：

import styled from 'styled-components';

const StyledButton = styled(Button)`
  background-color: #1890ff;
  color: white;
`;

6. 修改Ant Design默认变量

对于主题级别的修改，建议通过修改less变量：

// 在你的less文件中覆盖变量
@primary-color: #1890ff;
@border-radius-base: 4px;

最佳实践建议

1. 避免直接修改Ant Design组件样式 - 优先使用组件提供的props和API
2. 保持样式作用域局部化 - 使用CSS Modules或CSS-in-JS
3. 使用自定义前缀 - 为你的类名添加特定前缀
4. 主题定制优先 - 通过修改less变量来改变整体主题
5. 隔离第三方样式 - 将Ant Design样式与你的应用样式分开管理

通过以上方法，你可以有效地避免Ant Design组件样式冲突问题，同时保持代码的可维护性。