Ant Design by Example: Part 2

John Tucker
codeburst
Published in
5 min readFeb 18, 2018

--

We learn how to customize the Ant Design system.

This article is part of a series starting with Ant Design by Example: Part 1.

All of the examples in this series are available for download.

Switch

In order to (properly) customize Ant Design, we need to switch from importing CSS to Less. Ant Design uses the Less (as opposed to the more popular SASS) CSS preprocessor.

note: My starter build uses SASS.

Starting from the last example, we add support for importing globally scoped Less files from node_modules.

yarn add less@2.73 --exact --dev
yarn add less-loader@4.0.5 --exact --dev

note: When I first tried to customize Ant Design, I used a more recent version of less and less-loader and failed miserably; these version requirements were extracted out of the Create-React-App example.

UPDATE 12/14/18: More recently, found an issue that explains how to use Ant Design with a more recent > 3.X version of Less. The answer simply amounts to enabling JavaScript in Less (below).

We then update:

switch/webpack.config.js

...
module.exports = (env) => {
const globalLessLoaders = [
{
loader: 'css-loader',
options: {
importLoaders: 1,
sourceMap: true,
},
},
{
loader: 'less-loader',
options: {
sourceMap: true,
},
},
];

...
module: {
rules: [
...
{
test: /node_modules\/.*\.less$/,
use: env.NODE_ENV === 'production' ?
ExtractTextPlugin.extract({
use: globalLessLoaders,
fallback: 'style-loader',
}) :
[
{
loader: 'style-loader',
},
...globalLessLoaders,
],
},

...

UPDATE 12/14/18: More recently, found an issue that explains how to use Ant Design with a more recent > 3.X version of Less. The answer simply amounts to enabling JavaScript in Less. Updated config entry below:

switch/webpack.config.js

...
{
loader: 'less-loader',
options: {
javaScriptEnabled: true,
sourceMap: true,
},
},
...

switch/.babel.rc

...
"import",
{
"libraryName": "antd",
"style": true
}
]
...

Customize

Now that we are using the Less version of Ant Design, we can provide values for Less variables to customize the build. For example, one can change out color palette (makes broad changes throughout the application) by modifying the following Less variables in less-loader.

@primary-color          : @blue-6;
@info-color : @blue-6;
@success-color : @green-6;
@processing-color : @primary-color;
@error-color : @red-6;
@highlight-color : @red-6;
@warning-color : @gold-6;
@normal-color : #d9d9d9;

Starting from our previous example, we modify the primary color to a green.

customize/webpack.config.js

{
loader: 'less-loader',
options: {
sourceMap: true,
modifyVars: {
"@primary-color": "#1DA57A",
},

},

UPDATE 12/14/18: More recently, found an issue that explains how to use Ant Design with a more recent > 3.X version of Less. The answer simply amounts to enabling JavaScript in Less. Updated config entry below:

customize/webpack.config.js

{
loader: 'less-loader',
options: {
sourceMap: true,
javascriptEnabled: true,
modifyVars: {
"@primary-color": "#1DA57A",
},

},

With a result…

Hacking

While modifying Less variables gives you quite a bit of control, there might be cases where you want to make a very particular change. For example, the following variables can be used to configure buttons:

// Buttons
@btn-font-weight : 400;
@btn-border-radius-base : @border-radius-base;
@btn-border-radius-sm : @border-radius-base;
@btn-primary-color : #fff;
@btn-primary-bg : @primary-color;
@btn-default-color : @text-color;
@btn-default-bg : #fff;
@btn-default-border : @border-color-base;
@btn-danger-color : @error-color;
@btn-danger-bg : @background-color-base;
@btn-danger-border : @border-color-base;
@btn-disable-color : @disabled-color;
@btn-disable-bg : @disabled-bg;
@btn-disable-border : @border-color-base;
@btn-padding-base : 0 @padding-md - 1px;
@btn-font-size-lg : @font-size-lg;
@btn-font-size-sm : @font-size-base;
@btn-padding-lg : @btn-padding-base;
@btn-padding-sm : 0 @padding-xs - 1px;
@btn-height-base : 32px;
@btn-height-lg : 40px;
@btn-height-sm : 24px;
@btn-circle-size : @btn-height-base;
@btn-circle-size-lg : @btn-height-lg;
@btn-circle-size-sm : @btn-height-sm;
@btn-group-border : @primary-5;

But let us say we can to change the primary button’s active color; not an option with the variables. The good news is that Ant Design’s CSS is globally scoped and thus can be overridden, e.g., we can override .ant-btn-primary:active.

Say we want to make the active color red; we update:

hacking/src/index.css

body {
background-color: black;
}
:global(.ant-btn-primary:active) {
background-color: red !important;
border-color: red !important;
}

With the changes in place:

Clean

Running our bundle analyzer with:

yarn analyze

Shows that Moment is consuming a lot of space (over 200K); I originally included it as I assumed that we needed to initialize it.

So, went ahead and removed it (but left it as a project dependency):

clean/src/index.jsx

import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
import App from './components/App';
import './index.css';
window.console.log(process.env.NODE_ENV);
render(
<App />,
document.getElementById('root'),
);

Then looking carefully, we see that Ant Design works as expected; only bringing the specifically used functionality (Button) and thus only using 5.44KB of JavaScript.

While the Ant Design CSS appears to mostly be about buttons; it is still about 54KB.

Wrap Up

With its singular focus on desktop applications, flexible customization features, modular imports (small footprint), and overall recent popularity the Ant Design system is a powerful solution for desktop web application development.

--

--