Ant Design with custom CSS?
Ant Design, A great UI library you said, right? Well, I have a different opinion. CUSTOMIZATION!!!!!! for god's sake. How is a developer supposed to add custom styles to those perfectly functioning components? Tell me what you have done about that Ant people? (Hih! ant people) You expect us to use those components with the same exact Ant-design-pre-build styles??
That’s enough drama for one article. Storytime! At SEF, we use Ant Design as our primary UI library to build our react+typescript UIs. It was a perfect fit until we stumbled upon this new project called “AcademiX”. When we first started to use Ant Design we basically developed dashboards. You know those technical-looking UIs with lots of Tabs and Components. That’s right you got it! To build that scary stuff it is perfect. I mean… no one cares if it looks good or not. Those dashboards, most of the time, are for internal use and no ones gonna complain about the attractiveness of the UI as long as it gets the shit done. With a bucket full of AntD components, we were happy, impressed and… overtime a bit biased towards Ant Design. When “AcademiX” came along we had to create a UI for public users and with all the past seamless development experiences with Ant, we chose to use it for this as well.
An item object in this project had a title, link and a description. To list down an item we used card component and by default, it looked… well… awful let’s say… I couldn’t think of a better word to describe the amount of ugliness I encountered that day. I thought of making it look more compelling by adding box-shadows and rounded edges to the cards and wrote some custom CSS to achieve it. But it just wouldn’t work. This is because the generated dom is different from what we see in the developing environment. When those elements get nested inside ant-generated elements custom CSS doesn’t affect them. Default styles dominate over the custom ones.
I searched a bit and found out that ant design developers actually have a solution to this problem. (Well! yeah, the intro was just to get you hooked! I have nothing against Ant developers, Wonderful people… nothing but love.) They have provided us with this documentation with all the necessary detail to customize the default theme. But it was less oriented and I wanted to use CSS to accomplish this little task.
First I wrapped up the element with a parent div and set a custom class name, Opened up the developer tools in chrome, noted down the ant-generated class names of all the elements that I wanted to customize and then I used this approach to add custom styles.
It is a bit of a hack but our UI doesn’t suck now and I got the job done. Well… for all the people who thought that I’m gonna bash on Ant Design, No, Never gonna happen. (Relax dude, just my writing style, Jesus!)
This is what it looks like after adding custom CSS. You can check it out if you follow this link. If you are a student, go through, “AcademiX”, our collection of free educational resources and I guarantee that you will find some knowledge-rich and exiting resources to make your free time more productive.
Thank you very much for reading my article and until next time goodbye, stay safe, keep coding!
Here’s my Linkedin account, Hit me up with a message if you wanna… I don’t know… Talk lord of the rings, heavy-metal or programming.
