Overriding antd variables with less on V5

Question

I'm upgrading to antd v5 and i had some issues with keeping the variables overrides made from less files with v4

i have multiple less files inside src/theme one of them is with the following

@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;

Also tried to inject primaryColor from ConfigProvider as follows ConfigProvider.config({ theme: {primaryColor: '#fa259e'} });

in vite.config i added the following

...
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,
                },
            },
        },
       ...

My stylings has multiple issues with spacing paddings ... also primary-color not applying

EDIT I have imported antd/dist/reset.css and also added v4Token in vite config just like the documentation suggested as follows

...
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,
            },
        },
        ...
    });
};

the problem i have a dynamic @primary-color and used to use ConfigProvider.config({ theme: defaultTheme });

so i tried to override as bellow

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

It changes the color successfully, but the components or elements using less files @primary-color is still set by the default blue color of antd

score 1 · Accepted Answer · answered Jan 16 '23 at 16:21

1

Well, I think your problem is that antd v5 does not support LESS anymore

See here https://ant.design/docs/react/migration-v5

Unfortunately I do not have an easy solution for you, other than sticking to v4 as long as you need LESS support.

answered Jan 16 '23 at 16:21

exside

3,736
1
12
19

I know about them dropping LESS, but i'm thinking of a migration shortcut. rather then re-typing everything in CSS-in-JS – Ilyas Ghomrani Jan 16 '23 at 16:41
Not sure if it would work, but what if you simply build your styles outside of antd, e.g. directly with the LESS compiler and then include that compiled stylesheet in your app? – exside Jan 16 '23 at 16:44
I'm not seeing a migration shortcut as the two approaches (e.g. LESS vs cssinjs) are very different in nature. There is a v5 codemod tool, but I have my doubts that it would be solving your problem, if you haven't yet check it out regardless https://github.com/ant-design/codemod-v5 – exside Jan 16 '23 at 16:52
tried the codemod but it skipp all the less files – Ilyas Ghomrani Jan 17 '23 at 10:17
Can you check the changes ? – Ilyas Ghomrani Jan 17 '23 at 23:08

score 0 · Answer 2 · answered Apr 26 '23 at 13:36

I rewrited defaultSeed tokens and it works good for me.

const withLess = require('next-with-less');
const { theme } = require('antd/lib');
const { convertLegacyToken } = require('@ant-design/compatible/lib');

const { defaultAlgorithm, defaultSeed } = theme;

const mapToken = defaultAlgorithm({
    ...defaultSeed,
    colorPrimary: '#115dee',
});

const v4Token = convertLegacyToken(mapToken);

module.exports = withLess({
    lessLoaderOptions: {
        lessOptions: {
            modifyVars: v4Token,
            javascriptEnabled: true,
        },
    },
});

Can you explain what happens here? Where do we load the less variables and how does it get converted to a v5 compatible theme? — Plumpie, Jul 20 '23 at 09:58

Overriding antd variables with less on V5

2 Answers2