This post seeks to give the reader a straightforward fix to customizing the ant.design UI library for react, style variables.
I will like to be as brief as possible, so I will assume you have basic programming knowledge, Webpack, babel, Command line terminal, npm, HTML, CSS, Less and Javascript knowledge, ES6 syntax, React and are familiar with object oriented programming.
Ant Design is a UI library for react developed by Alibaba. It’s really nice and useful in making your react project solid and saves us time. To configure Ant Design, you need to know that the library makes use of less, and therefore, overrides will be done using a less file.
No need to journey far and change your css style sheets from .css to .less, then the lessc command and all that lengthy work which if not careful, can break something and create extra work.
To get started, create a .less file in the root directory of your project, call it say theme.less (for this demonstration), write the variable you wish to override in the theme.less file.
A full list of Ant.design variables can be found here. Careful now, ant design variables are inter-dependent, so changing one variable’s value can alter the presentation of other components.
A good example is, if you alter the font-size base, to say 3vh, your fonts will look bigger and better, but your search box will get messed up quick.
So for simplicity and to make sure this works, simply just write a new primary color in the theme.less file, use say #ff66cc to make things obvious.
Then go to your cmd, cd to your project’s directory, install babel-import-plugin
npm install — save-dev babel-import-plugin
then go to your .babelrc file to add the plugin.
“plugins”: [[“import”, {“libraryName”: “antd”, “libraryDirectory”: “es”, “style”: true}]]
This plugin aids override the defaults.
After those steps, go to your common config file and tell webpack how to handle less files and specify a hack for it.
Make sure you have less and less loader already installed. Now in your common config, specify how webpack should less file.
(see the image below)
Save and move on.
Here on,
any ant.design component you import into your project will now display the new #ff66cc primary color.
I hope this was helpful.
Kindly follow me on twitter.
Top comments (0)