<aside> ⚠️ Important to note: in phase 2 we used Ant Design V4.

</aside>

Issues with using antd V5:

• antd V5 uses CSS-in-JS which is new(ish) and not compatible with Server-side Rendering in the case of antd.
• After much research, a solution was found using extractStyle. I couldn’t find any examples using this pattern except for **chunsch** response in this thread and they advised against doing this for now - until antd comes up with an intergrated SSR solution.

This leaves us with V4 that uses LESS:

• First of all, here is an example of a next.js-antd-less project.

• This tutorial was followed to set up variables.less and .babelrc files which allows us to enter Ant Design’s default styles and override them.

• A complete list of ant design variables that are open to customization can be found here

• Before customizing an antd component, check if there is a variable provided! These custom styles would apply to ALL components that use that variable and would remain consistent across the project.

Some example variables provided by antd that are used across the design system.

Note: when using Ant Design components, make sure that version 4.x is selected at the top right hand corner. By default it should show us V5 and there may be differences between the two versions.

<aside> 🙂 If you have any questions about this, you can reach out to [email protected]

</aside>