There is a problem that Customize Ant Design Theme is not applied

Question

I am customizing the theme of antd while using next.js.

After Googling the related information, I found a good example and completed the setup as follows.

// package.json
    "dependencies": {
    "@ant-design/icons": "^4.8.0",
    "antd": "^4.24.3",
    "next": "^12.3.1",
    "next-plugin-antd-less": "^1.8.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "styled-components": "^5.3.6",
    "styled-reset": "^4.4.2"
  },
  "devDependencies": {
    "babel-plugin-import": "^1.13.5"
  }

// .babelrc
{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

// next.config.js
const withAntdLess = require('next-plugin-antd-less');

module.exports = withAntdLess({  
  modifyVars: { '@primary-color': '#04f' },  
  lessVarsFilePath: './styles/variables.less',  
  lessVarsFilePathAppendToEndOfContent: false,  
  cssLoaderOptions: {},

  webpack(config) {
    return config;
  },
});

// styles/variables.less
@import '~antd/lib/style/themes/default.less';
@import '~antd/dist/antd.less';

@primary-color: #52c41a;

// pages/app.js
import React from 'react';
import { ThemeProvider } from 'styled-components';

import "../styles/variables.less";
import GlobalStyles from '../styles/GlobalStyles';
import Theme from '../styles/Theme';

const Home = ({ Component, pageProps }) => {
  return (
    <>     
      <GlobalStyles />
      <ThemeProvider theme={Theme}>
        <Component {...pageProps} />         
      </ThemeProvider>
    </>
  );
};

export default Home;

// log of executing npm run dev command
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn  - Invalid next.config.js options detected: 
  - The root value has an unexpected property, modifyVars, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
  - The root value has an unexpected property, lessVarsFilePath, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).      
  - The root value has an unexpected property, lessVarsFilePathAppendToEndOfContent, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
  - The root value has an unexpected property, cssLoaderOptions, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).      

See more info here: https://nextjs.org/docs/messages/invalid-next-config
info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc.js" https://nextjs.org/docs/messages/swc-disabled
info  - Using external babel configuration from C:\Users\Administrator\OneDrive\Desktop\Training\.babelrc.js
event - compiled client and server successfully in 23.4s (193 modules)

After completing the setting, when I ran the code, the setting was not applied contrary to my expectations.

I might have made a mistake in my code, so I went back to the reference material and tried the settings again, the result was the same.

Is there something wrong with my settings?

We would appreciate it if you could leave a comment in the reply.

Answer 1

Customize theme with ConfigProvider

import { Button, ConfigProvider } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <ConfigProvider
    theme={{
      token: {
        colorPrimary: '#00b96b',
      },
    }}
  >
    <Button />
  </ConfigProvider>
);

export default App;

And get the results.

For more details you can check the official documentation here >> https://ant.design/docs/react/customize-theme