Search code examples
reactjslessantdvitecss-in-js

Overriding antd variables with less on V5

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

Solution

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

    enter image description here

    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.