最稳妥的方式是直接修改@primary-color，但必须确保其在antd.less加载前生效；常见失效原因包括变量作用域错误、加载顺序不当、路径错误等，正确做法是在theme.less中按顺序导入default.less、重定义变量、再导入antd.less，并在入口文件顶部引入。
直接改 @primary-color 是最稳妥的方式，但必须确保它在 antd.less 加载前生效，否则白改。
为什么你的自定义变量没生效
常见现象是改了 @primary-color，重启后按钮还是蓝色。根本原因是：Less 变量覆盖有严格的加载顺序，不是“写了就生效”。
- 把变量写在组件里（比如
Button.module.less）——作用域太小，不参与全局主题编译 - 在
antd/dist/antd.css之后再 import 自定义样式 —— 变量已被编译死，无法回溯覆盖 - 用 CRA 但没配
craco或lessOptions.modifyVars—— Webpack 根本没把你的变量传给 less-loader - 路径写错，比如
@import '~antd/lib/style/themes/default.less';少了个/或拼错themes—— 导入失败，后续重定义全无效
入口文件中正确的 Less 加载顺序
这是唯一能保证变量被 antd 组件消费的链路。所有自定义变量必须出现在 antd.less 之前，且通过 default.less 做基底导入。
- 新建
src/theme.less，内容按顺序写：
@import '~antd/lib/style/themes/default.less'; @primary-color: #ff6b35; @border-radius-base: 6px; @font-size-base: 14px; @import '~antd/dist/antd.less';
- 在
src/index.tsx最顶部（任何其他 import 之前）写：import './theme.less'; - 删掉原来可能存在的
import 'antd/dist/antd.css'—— 它和 Less 编译冲突 - 确保项目支持 Less 解析（CRA 需
craco+craco-less，配置里加lessOptions: { javascriptEnabled: true }）
使用 craco 配置 modifyVars 的注意事项
这种方式适合不想动 Less 文件结构、或需要动态换肤的场景，但变量名必须加引号，且不能漏掉 javascriptEnabled: true。
立即学习“前端免费学习笔记（深入）”；
- 在
craco.config.js中写：
module.exports = {
style: {
postcss: {
plugins: [require('postcss-preset-env')],
},
},
plugins: [
{
plugin: require('craco-less'),
options: {
lessLoaderOptions: {
lessOptions: {
javascriptEnabled: true,
modifyVars: {
'@primary-color': '#ff6b35',
'@border-radius-base': '6px',
'@heading-color': '#1f1f1f'
}
}
}
}
}
]
};
-
modifyVars中的键必须是字符串形式的变量名（带@），值也得是字符串 - 如果用了暗色模式（Ant Design Pro 4+），
modifyVars会覆盖所有主题分支 —— 此时应改用config/config.ts的theme字段注入，避免破坏colorPrimary的 runtime 切换逻辑 - 修改
craco.config.js后必须重启 dev server，热更新不会重新读取该配置
哪些变量改了也没用？
不是所有 Ant Design 的样式都走 Less 变量，有些是硬编码进组件逻辑或内联 style 的，比如：
-
@table-header-bg对固定列表格可能无效 —— 因为.ant-table-thead > tr > th的背景由 JS 动态计算，需配合:global(.ant-table-thead > tr > th)覆盖 -
@input-height-lg不影响Search组件的高度 —— 它内部用的是独立变量@search-input-height - 图标颜色（如
Icon）不响应@primary-color—— 它默认继承currentColor，要改需覆盖.anticon的color - 某些组件的圆角（如
Tag）受@border-radius-sm控制，而非@border-radius-base—— 查源码确认具体依赖变量
变量覆盖不是万能的，遇到失效时先查 node_modules/antd/lib/style/themes/default.less 里对应组件是否真用了那个变量，再决定是改变量、加选择器权重，还是用 :global 直接覆盖 CSS 规则。
