Antd + Styled Components + TypeScript = ❤️

Published in

White Prompt Blog

4 min readNov 30, 2022

When starting a new Front End project, there are a series of decisions that have to be made. It all depends on the size of the team, deadlines, seniority of the developers, the purpose of the application, and a multitude of variables.

At White Prompt, making the right decisions while considering these types of variables is an integral part of our process, from requirements analysis throughout production and deployment phases. Offering software development services within the United States, we go beyond the norm with the added layer of IT consulting and strategy to offer true end-to-end capabilities to our clients. If you are ready to build, contact us today to schedule a free consultation. Let’s develop an out-of-the-box solution together.

In the last project I developed, there were many things defined, but one question was left open: What would be the approach to build all the components that were already designed, ensuring quality without wasting time?

First, I started the Front End project from scratch, with a considerable backlog. To speed up the construction of the components, I chose to add Antd to the project. I considered this one to be a complete system design, that was lightweight, minimalistic and easy to extend. Styled-components were also utilized to incorporate CSS into the JavaScript code. For anyone who has knowledge of CSS, you know that there are frequently-occuring errors like class name duplication, misspelled class names and unknown class names to name a few. This can be overwhelming! This is also the beauty of styled-components.

Of course, I also used TypeScript to develop the application. TypeScript code converts to JavaScript, and uses type interface to give your application great tooling without additional code. This is just lovely! 🥰

What is Ant Design?

If you have never heard of Ant Design, let me give you a brief introduction. Ant Design is a React UI library with numerous components that are easy-to-use and allow you to build beautiful, user-friendly interfaces.

On their official webpage, they describe themselves as:

A design system for enterprise-level products. Create an efficient and enjoyable work experience.

And…

…With complex scenarios, designers and developers often need to respond fast due to frequent changes in product demands and concurrent R & D workflow. Many similar contents exist in the process. Through abstraction, we could obtain some stable and highly reusable components and pages.

From here, I will assume that our brief explanation of styled-components and Type Script at the beginning of our blog were sufficient to understand their purpose in our development here.

What’s the problem anyway?

With the arrival of new developers, some questions arose about how we should proceed to change the styles of Antd components. Not everyone was familiar with this approach and not even with Antd itself.

The answer was simple. We just need to encapsulate the Antd component into a styled-component.

Something like:

import styled from 'styled-components'
import { Card } from 'antd'

const StyledCard = styled(Card)``

This way it is possible to change any style of the component, as if it were a simple div:

const StyledCard = styled(Card)`
  padding: 0;
`

You can also change the styles of all component children:

const StyledCard = styled(Card)`
  .ant-card-body {
    padding: 0;
  }
`

From there you can change any style in the component. This includes adding some attributes that are not present in the original component.
How? Creating a new type!

import styled from 'styled-components'
import { Card, CardProps } from 'antd'

type MyType = {
  myAttr: string
}

const StyledCard = styled(Card)<CardProps & MyType>``

With that, the sky is the limit for your style changes.

Conclusion

It all seems very simple, because it is.

This approach works for other component libraries and may not be new to many people, but for many others it is. If it’s not something new, it could be something that has slipped your mind in the rush of everyday life and you needed a simple refresher.

Hope this can help in some way.

We think and we do!

Do you have a business that requires an efficient and powerful data architecture to succeed? Looking for a software development agency to make it happen? Get in touch with us at White Prompt today!

References