Customise Ant Design For React (Painlessly)

If you’re like me and have used Ant Design, I’m sure at some point you’ve said to yourself: “That button sure looks good but I wish I could change the default styling”. If so, let me tell you that Ant Design does allow you to apply your custom CSS as well as override existing styles with some additional effort from your end.

For your components to look the way you want, what is required is some “tweaking” of the Ant Design library files (in particular the webpack.config.js) file thats sitting inside:

→ node_modules/react-scripts/config/webpack.config.js

Create-React-App is a handy tool since it bundles a lot of the configuration and build dependencies for you (that’s the whole point behind it). However, we need access to these config files to achieve our goal. If we were to eject our app, we’d end up with more than we asked for. So, what’s the next best thing you can do?

Enter, react-app-rewired.

React-app-rewired is a handy package that allows you to inject changes into the base config files without having to actually touch them. Instead, we write our own config files which apply the necessary changes. Now that you have a general idea of what needs to be done, let’s dig into the code!

Step 1

Let’s install all that we need:

npm install react-app-rewired customize-cra babel-plugin-import less less-loader

Step 2

Next, we need to edit our package.json file and get our app to use react-app-rewired. Simply make the following updates to the file and save:

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
},

Step 3

The last step is to simply define our custom file to override the necessary design elements. Proceed to create a new file called config-overrides.js and save it in the root directory of your react application (where your package.json is). Paste in the following code

const { override, fixBabelImports, addLessLoader } = require(‘customize-cra’);
module.exports = override(
    fixBabelImports(‘import’, {
        libraryName: ‘antd’,
        libraryDirectory: ‘es’,
        style: true,
    }
),
addLessLoader({
    lessOptions: {
        javascriptEnabled: true,
            modifyVars: {
                '@font-family': `'Teko', sans-serif`,
                ‘@font-size-base’: ‘20px’,
            },
        },
    }),
);

The above code overrides the default font and font-size. We can now proceed to specify any attribute we would like to change in modifyVars. For a full list of attributes that can be changed, refer to:

ant-design/ant-design

And yeah, that’s about it! You should now have fine control over the design of your Ant Design components.

NOTE: Please do note that for your changes to be applied, you’d need to build the app again (unless you’re using something like npm watch).