Change Ant Design variables using ReactJs

Question

I am using antd library in my application. According to the documentation, I can customize the theme by changing the variables like:

modifyVars: {
  "primary-color": "#EB564F",
   "link-color": "#0DD078",
   "success-color": "#0DD078",
   "border-radius-base": "40px",
}

I did something like this in my react application adding the file webpack.config.js and the next code inside:

// webpack.config.js
const antdRegex = /antd.+\.less$/;

module.exports = {
rules: [
    {
        test: antdRegex,
        loader: [
            "style-loader",
            "css-loader",
            {
                loader: "less-loader",
                options: {
                    lessOptions: {
                        modifyVars: {
                            "primary-color": "#EB564F",
                            "link-color": "#0DD078",
                            "success-color": "#0DD078",
                            "border-radius-base": "40px",
                        },
                        javascriptEnabled: true,
                    },
                },
            },
        ],
    }]
}

But the colors don't change. Why and how to solve it?

Answer 1

Works really well what @rezso.dev has said above - Without ejecting create-react-app.

Other variables that can be edited:

@primary-color: #1890ff; // primary color for all components
@link-color: #1890ff; // link color
@success-color: #52c41a; // success state color
@warning-color: #faad14; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 14px; // major text font size
@heading-color: rgba(0, 0, 0, 0.85); // heading text color
@text-color: rgba(0, 0, 0, 0.65); // major text color
@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
@border-radius-base: 2px; // major border radius
@border-color-base: #d9d9d9; // major border color
@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers

https://ant.design/docs/react/customize-theme

Answer 2

Using craco in create-react-app

For webpack.config.js to take effect, you would have to eject from create-react-app. The craco package solves this problem as described in the official guide.

1. Install the relevant craco packges using npm

npm install --save-dev @craco/craco craco-less

2. Change .css imports to .less

/* src/App.js */
import './App.css' -> './App.less';

/* src/App.less */
@import '~antd/dist/antd.css' -> '~antd/dist/antd.less';

3. Create craco.config.js in project root

const CracoLessPlugin = require("craco-less");

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {
              "primary-color": "#EB564F",
              "link-color": "#0DD078",
              "success-color": "#0DD078",
              "border-radius-base": "40px",
            },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

4. Update scripts in package.json

"scripts": {
  "start": "craco start",
  "build": "craco build"
  "test": "craco test"
}

5. Done

Answer 3

Without ejecting create-react-app

For webpack.config.js to take effect, you would have to eject from create-react-app. There is a workaround which does not require ejecting your project.

Steps

1. Install less globally
2. Create a main.less file and include antd.less in it
3. Redeclare the default variables you want to override
4. Compile main.less to .css and include THAT file in your app

1. Install less globally

npm install -g less

2-3. Create a main.less file and include antd.less in it then redeclare the default variables you want to override

@import 'node_modules/antd/dist/antd.less';
@primary-color: #EB564F;
@link-color: #0DD078;
@success-color: #0DD078;
@border-radius-base: 40px;

4. Compile main.less to .css and include THAT file in your app

Run lessc "./src/styles/main.less" "./src/styles/css/antd.css" --js from the root of your project then import this css file in your project.

---

Source: Customising Ant Design (antd) theme without using react eject or any unreliable packages

Answer 4

Please check antd documentation for installation if you doesn't want to eject your react application(created using CRA)..

https://ant.design/docs/react/use-with-create-react-app

This answer is for those who wants to install ANTD manually after ejecting create react app.

versions used:

• CRA 4.0.3

React Installation Steps:

• Create react app using yarn CRA command (yarn create react-app my-app)

• Eject react app (yarn eject)

CRA doesn't have less in boilerplate code(At least until 4.0.3).. Since ANTD is in less, we do install it manually.(You can import antd css directly to skip this entire process...But antd css is not on demand, which will download styles for all components even though we don't use them)

versions used:

• antd - 4.13.1

• babel-plugin-import - 1.13.3 (For importing components on demand)

• less- 4.0.0

• less-loader - 7.3.0

• less-vars-to-js - 1.3.0

Steps:

• Install all packages using this command

  yarn add antd@4.13.1 && yarn add babel-plugin-import@1.13.3 less@4.0.0 less-loader@7.3.0 less-vars-to-js@1.3.0 -D

Webpack config and setting theme

1. In package.json install antd plugin for babel

   "plugins": [ [ "import", { "libraryName": "antd", "style": true } ] ]

2. Create antdTheme.less file in src folder...(we provide our theme
   settings here)

3. Modify webpack.config.js (Modified in three places in this file)

   // Ant Design Webpack Config

   const lessToJs = require("less-vars-to-js");

   const themeVariables = lessToJs( fs.readFileSync(path.join(__dirname, "./../src/antdTheme.less"), "utf8") );

   const lessRegex = /.less$/;

   const lessModuleRegex = /.module.less$/;

Add if else condition and add this code..check picture on how condition is written

loaders.push(
          {
            loader: require.resolve("resolve-url-loader"),
            options: {
              sourceMap: isEnvProduction
                ? shouldUseSourceMap
                : isEnvDevelopment,
            },
          },
          {
            loader: require.resolve(preProcessor),
            options: {
              lessOptions: {
                modifyVars: themeVariables,
                javascriptEnabled: true,
              },
            },
          }
        );

Add this code for supporting less and less modules

// Ant Design config
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                "less-loader"
              ),
              sideEffects: true,
            },
            // Adds support for CSS Modules, but using LESS
            // using the extension .module.less
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                "less-loader"
              ),
            },

After changing these files

• Start your application using yarn start..
• You should see green as primary colour hence we used the same in our theme less file.. Change them as per your requirement (Remember you have to restart when you make changes to theme level less file)...