Ant Design自定义主题对Input组件不生效问题咨询

该问题本质是样式引入顺序导致的优先级覆盖问题：Input 组件的默认样式加载时机晚于你定义的主题变量样式，其余组件主题生效正常是因为它们的默认样式加载顺序早于你的自定义样式。你目前调整 less 引入顺序的临时方案本质是靠自定义样式后加载的优先级覆盖默认样式，很容易因为后续依赖更新、打包规则变化再次失效，更合理的解决方案如下：

• 方案1：使用 AntD 官方推荐的主题变量注入方式，从根源规避顺序问题
  若使用 umi/Max 框架，直接在配置文件的 theme 字段配置覆盖变量即可，无需单独写 global.less：

  // .umirc.ts 或 config/config.ts
  export default {
    theme: {
      'primary-color': '#165DFF',
      'input-border-color': '#d1d5db',
      // 其余需要覆盖的主题变量统一写在这里
    },
  }
  

  若使用 webpack/vite，在 less-loader 配置项中通过 modifyVars 注入变量，同时开启 javascriptEnabled: true，变量会在所有 AntD 组件样式编译前注入，不会出现顺序冲突。
• 方案2：如果确实需要通过 global.less 自定义样式，提升自定义规则权重即可，无需调整引入顺序

  /* 加自定义类或者:global提高权重，优先级高于AntD默认样式，不管引入顺序都能生效 */
  :global(.ant-input) {
    border-color: #xxx;
    color: #xxx;
  }
  

• 方案3：若使用 AntD v5 版本，直接通过 ConfigProvider 全局配置主题，是最优解，完全不需要处理 less 引入相关逻辑：

  import { ConfigProvider } from 'antd';
  import App from './App';
  
  export default function Root() {
    return (
      <ConfigProvider
        theme={{
          token: {
            colorPrimary: '#165DFF',
            // 全局通用token
          },
          components: {
            Input: {
              // 单独针对Input组件的自定义配置
              hoverBorderColor: '#165DFF',
              activeBorderColor: '#165DFF',
            }
          }
        }}
      >
        <App />
      </ConfigProvider>
    )
  }
  

内容的提问来源于stack exchange，提问作者Đạt Nguyễn Trịnh