在 V5 上用 less 覆盖 antd 变量

Question

我正在升级到 antd v5，但在使用 v4 保留较少文件的变量覆盖时遇到了一些问题

我有多个 less 文件，src/theme其中之一包含以下内容

@import 'antd/lib/style/themes/variable.less';

/* font */
@font: ~'var(--font)';

/* auxiliary colors */
@secondary-color: ~'var(--secondary-color)';
@secondary-color-light: ~'var(--secondary-color-light)';
@primary-color-dark: @primary-7;
@primary-color-light: @primary-5;
@background-color: #f8f8f8;
@shadow-color: rgba(0, 0, 0, 0.09);
@text-color: #656565;
@secondary-text-color: #9d9d9d;
@light-text-color: #bababa;

@secondary-color-bg: @green-1;
@warning-color-bg: @orange-1;
@error-color-bg: @red-1;
@info-color-bg: @blue-1;

/* sizes */
@design-scale: 60 / 70;
@app-bar-height: 60px;

@page-padding: 40px 4vw;
@page-padding-mobile: 30px 15px;

@border-radius-base: 4px;
@border-width-base: 2px;

还尝试primaryColor从 ConfigProvider以下位置 注入ConfigProvider.config({ theme: {primaryColor: '#fa259e'} });

我vite.config添加了以下内容

...
import { theme } from 'antd/lib';
...

const { defaultAlgorithm, defaultSeed } = theme;

const mapToken = defaultAlgorithm(defaultSeed);
const v4Token = convertLegacyToken(mapToken);

export default () => {
    return defineConfig({
       ...
       css: {
            preprocessorOptions: {
                less: {
                    javascriptEnabled: true,
                    modifyVars: v4Token,
                },
            },
        },
       ...

我的样式在间距填充方面存在多个问题......而且原色也不适用

编辑 我已经导入antd/dist/reset.css并添加v4Token到 vite 配置中，就像建议的文档一样，如下所示

...
import { convertLegacyToken } from '@ant-design/compatible/lib';
import { theme } from 'antd/lib';
...

const { defaultAlgorithm, defaultSeed } = theme;

const mapToken = defaultAlgorithm(defaultSeed);
const v4Token = convertLegacyToken(mapToken);

export default () => {
    return defineConfig({
        ...
        css: {
            preprocessorOptions: {
                less: { javascriptEnabled: true, modifyVars: v4Token },
                modifyVars: v4Token,
            },
        },
        ...
    });
};

问题我有一个动态@primary-color并且习惯使用ConfigProvider.config({ theme: defaultTheme });

所以我尝试覆盖如下

...
<ConfigProvider
            theme={{
                token: {
                    colorPrimary: defaultTheme.primaryColor,
                },
            }}
            locale={antDesignLocal}
            direction={dir}
        >
            {children}
        </ConfigProvider>
...

更改颜色成功，但是使用less文件的组件或元素@primary-color仍然设置为antd默认的蓝色

Answer 1

嗯，我认为你的问题是 antd v5 不再支持 LESS

请参阅此处https://ant.design/docs/react/migration-v5

不幸的是，只要您需要较少的支持，除了坚持使用 v4 之外，我没有给您一个简单的解决方案。