How to Customize Ant Design Theme | Ant Design Theming in React JS | Ant Design Theme Customization

#antd #reactjs #theme
In this video I explained how to Customize Ant Design Theme in React JS

This video focuses on
- How to customize ant design theme in ReactJS
- How to use less programming for styling
- How to modify less style variables to create new antd themes
- What are the available options for theming different antd components
- How to use create react app config override (craco) and craco-less npm packages for overriding antd theme variables to create custom themes in React JS apps
- Shows examples of different antd components like Button, Input, Progress, Spin, Date Picker and Slider by changing their themes


In this video we will be using different available props of following components, please go through their videos at given links if you are not already familiar with them.

For more details on ant-design and its theme customization, please visit its documentations at

Happy Coding!

[Jananis]

Hi, theme is not set to datepicker why?

[danianiazi]

sir how can i customize components styles i want my all text boxex with 5 border width and and a backgroung og grey color or i want my text h1 to 18 font and bold and h2 16 font bold how to customize all this?

[vikashdenzil]

Hello sir, how to add styles to Popover component, different styles for multiple Popover components instead of affecting antd global styles ?

[GeorgeFlorian]

I have followed your tutorial, but except @primary-color, no other variable gets changed. Any thoughts ?

[linda]

why I can't install the craco. It said that unable to resolve with dependency tree

[abudavid]

So will this still have effects on the normal css styles

[LaughingBull]

can you tell me what advantages this has over other methods?

[tuanato]

hi sir, can I customize style in ant design with css files or scss files? The way I did it was I inspect in the browser and get the className of the component to customize and overwrite it in the css or scss files. I don't know if that's the right way. Can you explain it to me? Thank you

[pooryak]

Hi Amir,
Thanks for video
Any thought on how we can have customization for example on border color in disable mode with css in js from antd?

[SumanthRockzz]

can you pls make a video on the new updated version of customize theme

[hamedjafari]

Hello my friend. I had a question. Does the ant design chart in the bar chart also support drill down?

[testingaccount]

HI Amir, I am planning to switch my office application to ant design, currently it is using html/css based components. so i always have to do alot of css for it. before i make this switching decision. i wanted to know how much ant design theming is customizable as compared to MUI? can i fully design beautiful pages to it plus customize the every single components?

[kmsnymisha]

Thank you so much for the tutorial..
How to change color of dark and light themes? which variables are used?
and my changes are not reflecting after server restart. they are reflecting only after doing the build. Any idea why?

[christianlauridsen]

The biggest drawback of this library is that it is tied to Less... that's a really big deal breaker for me..

[henryho]

Are you have any idea how to implement this in next js, without using the zen css sass package?

[uruuru]

i wanna switch theme from scss is it possible ?