Ant Design Components Styling using style Prop, className and Overriding ant classes in ReactJS

#reactjs #antd #style #theme
This video focuses on
- How to style Ant Design components in ReactJS
- How to use style prop to style antd components
- How to use className prop to style antd components
- How to override ant style classes to customize the antd components styling
- How to style same component differently in different React Components
- How to create small components that uses antd components inside that and style them and make them reusable
- How to use sass npm package to style antd components
- How to override the antd style classes in .scss file
- How to style antd Typography
- How to style antd Input
- How to style antd Button
- How to style antd DatePicker
- How to style antd DatePicker dropdowns which are added directly into the body
- How to style antd Table header cells and body cells differently
If you are new to ant-design, I have already added an intro video on ant-design and overview of its components at • Ant Design UI library ... link, please go through that video to set up the ground for further components implementation.
For more details on ant-design, please visit its documentation at ant.design/com...
Happy Coding!

[@pankajsinghpatwal]

Bro i have an question that why antd says that don't override the class css

[@CodeWithAamir]

Hi,
Can you please share the exact error/warning you are seeing? Because we can always override the styles.

[@vitalibedik]

Thanks for the all your videos about ant Design, I wathed all of them, very usefull and rare information

[@CodeWithAamir]

Thanks @Vitalya

[@fann_404]

great video.. thanks for sharing dude

[@hardwired66]

Ty

[@kcmikee]

Thank youuuu, this saved me a whole lot of time

[@CodeWithAamir]

Really great to hear that it was helpful. Thanks @Michael Esenwa

[@HtetWaiYan-ov4ew]

that's it??? We can't even write like - text-primary, text-success, text-danger. What is the point of using the framework if you have to overwrite all the css bit by bit or set the style props inside the component? that's why I can't find my tutorial regarding with Ant design framework.

[@CodeWithAamir]

Hi @Htet Wai Yan,
I believe its not interpreted correctly, this is the one way of styling the antd components if you do not want to create your own theme just wanted to use antd components as it is and style them when needed without a theme. But there are other ways too where you can create a proper themes where you define the primary color etc. and get that applied on different components like I explained in following video
Ant Design Dynamic Theme v5.x: ruclips.net/video/tgD-csfLNUs/видео.html
An Design Theme v4.x: ruclips.net/video/KIS-ONH207A/видео.html
I hope it clears your confusion. Please let me know if you need any more information on that.
Thanks

[@HtetWaiYan-ov4ew]

@@CodeWithAamir Thanks. I will take a look

[@saeeds851]

How to make antd table cells transparent so the background shows up? Thanks

[@CodeWithAamir]

Hi @saeeds851,
If you want only the data cell to be transparentt then you can override the background-color:"transparent" of ant-table class and if you want the table header also to be transparent then you can override the background-color:"transparent" of ant-table-cell class also .
Please let me know if that work for you.
Thanks .

[@pankajsinghpatwal]

Thank you buddy,❤️❤️

[@CodeWithAamir]

Always welcome 🤗

[@luluoyi]

Great vidoe! Can I ask how would you manage the parent child relationship without sass?

[@CodeWithAamir]

Hi @Lu Luoyi ,
Without sass you can do something like below
foo > bar > baz {
color: red;
}
the equivalent in sass is like this
foo {
bar {
baz {
color: red;
}
}
}
Which looks more good to developers and you can add many other css classes in same parent at the same time without rewriting the parent hierarchy again and again. Also you can add BEM naming convention to it to standardize the naming conventions etc. among your team members I mean there are multiple benefits of using sass after you become use to it.
Ultimately the sass also compiles to the native bare bone css but that is not developers headache, we use sass to make our life easier.
Hope it makes sense.
Thanks

[@joyahmed963]

can I use Tailwind? if yes how to use?

[@CodeWithAamir]

I have not tried Tailwind with antd components because both uses different styling approaches. But you can give it a try by installing the tailwind, configuring its css imports etc. and then you can try applying the tailwind css classes to ant components like
Ant Design Button with Tailwind Styles

I hope it helps.
Thank you !

[@KethiriSundaralingam]

Is there any way to make this override work with css modules?

[@CodeWithAamir]

Hi @Kethiri Sundaralingam ,
I don't think so it will work with css modules because those are local to the files and their css class names are generated/appended with some random unique characters which are not known while we are writing the styling. So one way to override in css module is that you can do this overriding in the global css module if that helps.
Otherwise in latest version of ant design 5 you can go with dynamic themes where you can override or create your custom stying in different ways. If you are interested in that I have a separate video at following link that might help you.
Antd Dynamic Theme: ruclips.net/video/tgD-csfLNUs/видео.html
Thanks

[@KethiriSundaralingam]

@@CodeWithAamir Thank you for the quick response.

[@bugraotken]

Thank you for your dedication man =))

[@CodeWithAamir]

Thank you @Bugra Otken for the encouragement!

[@igor.zxcvbnm]

Спасибо!

[@CodeWithAamir]

You are welcome!