Customizing antd Less or Css for create-react-app

Question

I am using create-react-app as starter kit and was having a go at antd component library.

I can't seem to find a way to customize their styles (for branding purpose). Documentation doesn't seem to give clear directions regarding customization.

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

They suggest two ways to do it though :

1.Using theme property . But this only works for antd-init or dva-cli boilerplates and not for create-react-app

2.Overriding Less variables .

Now to make the either of these option work for create-react-app without eject , what are the steps I need to take?

Answer 1

You question is not very well researched I am afraid. At a minimum, read the obvious resurces like the instructions at https://ant.design/docs/react/use-with-create-react-app and older Stackoverflow questions (like How do I use .babelrc to get babel-plugin-import working for antd? ) before posting a question.

As it stands, CRA does not support changing the Babel configuration. This is needed to include the antd babel-plugin, which is needed to support importing only the necessary antd modules.

As a result you can only import the whole monolithic antd in a non-ejected CRA app.

Answer 2

if you don't intend to use eject you should use config-overrides.js to specify how you want to modify the default webpack.config.js that is part of react-scripts. Then once you have a config-overrides you can add a less Rule that has an option for modifyVars. Here you can specify any changes to the less variables.

function addLessRule(config, env)
{
  const { getLoader, loaderNameMatches } = require("react-app-rewired");

  const fileLoader = getLoader(
    config.module.rules,
    rule => loaderNameMatches(rule, 'file-loader')
  );

  const lessExtension = /\.less$/;
  fileLoader.exclude.push(lessExtension);

  const cssRules = getLoader(
    config.module.rules,
    rule => String(rule.test) === String(/\.css$/)
  );

  var lessModifyVars = {
    'primary-color': '#990000',
    'link-color': '#1DA57A',
    'border-radius-base': '2px',
    'layout-header-background' : '#f0f2f5'
  };

  var lessLoaders = [
    { loader: 'style-loader'} ,
    { loader: 'css-loader' },
    { loader: 'less-loader', options: {
      modifyVars: lessModifyVars
    } }
   ];

  lessRule = {
    test : lessExtension,
    use: lessLoaders,
  }

  config.module["rules"].push( lessRule );
  return config
}

Answer 3

If you want to customize antd without using react eject and don't want to change use forked versions of create-react-app or react scripts then

you can simply create a less file (let's say main.less ) , import antd.less and replace the default variables of ant design in this main.less file.

Now compile this less file using lessc ( npm i -g less ).

lessc "main.less antd.css" --js

--js is for inline javascript in less Now simply include these complied css in your app.

take a look at https://medium.com/@aksteps/782c53cbc03b