How to config Ant Design in Next.js with custom theme?
From my real experience, Ant Design is one of the best React UI libraries in the word. Especially when you are building enterprise application and corporate internal application.
Ant Design which is specially created for internal desktop applications, is committed to improving the experience of users and product designers. User interface designers and user experience designers, collectively, are considered as product designers, and the boundaries of product managers, interaction designers, visual designers, front-end developers and develop engineers are blurred.
If you want to have your own design system, Ant design custom theme is not a bad solution. Ant Design allows you to customize our design tokens to satisfy UI diversity from business or brand requirements, including primary color, border radius, border color, etc. Compared with building Design System from scratch, Ant Design is fairly well enough. You will save pretty a lot time and effort.
💡This tutorials will show you how to config Ant Design Custom Theme in Next.js.
Install the dependencies
Assume you already installed Next.js.
yarn add antd
Because Ant Design is using Less as the development language for styling.
Ant Design Less variables We are using Less as the development language for styling. A set of less variables are defined for each design aspect that can be customized to your needs.
So instead to reset Less variables, you need to install @zeit/next-less.
yarn add @zeit/next-less -D
If you also want to use CSS module or Sass in your project, you can install the following dependencies:
yarn add @zeit/next-css -D
yarn add @zeit/next-sass -D
Let us install two more dependencies and we can talk this later.
yarn add less-vars-to-js -D
yarn add next-compose-plugins -D
Less loader and webpack config for Ant Design in next.config.js
Your configuration in next.config.js likes this:
💡💡💡💡💡Medium does not support Gitlab code snippet very well, please check the link below to copy the codes.
Let us focus on the configuration in withLess({ … }) part. In lessLoaderOptions, you need to set javascriptEnabled with ture and the value of modifyVars is your custom less theme values.
💡That is the reason we install less-vars-to-js dependency before. We read custom less values from local less file.
const themeVariables = lessToJS(fs.readFileSync(path.resolve(__dirname, './less/antd-custom.less'), 'utf8')); Then, config webpack in less loader as code snippet above.
💡Another hint, if you want to use Sass, too. You need to put Sass loader after less loader. Other it will cause an error.
const plugins = [withCSS, withLess({...}), withSass ]
Add custom less variables
Add custom less variables in ./less/antd-custom.less file, e.g.
@primary-color: #1890ff; // primary color for all components
@link-color: #1890ff; // link color
@success-color: #52c41a; // success state color
@warning-color: #faad14; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 14px; // major text font size
@heading-color: rgba(0, 0, 0, 0.85); // heading text color
@text-color: rgba(0, 0, 0, 0.65); // major text color
@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
@border-radius-base: 4px; // major border radius
@border-color-base: #d9d9d9; // major border color
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // major shadow for layersUsefull links
- Ant Design Default Variables: https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
- Ant Design Custom Theme: https://ant.design/docs/react/customize-theme
Update 02.04.2020
- Issue: “Use modularized antd” and got an error
import { Row } from ‘../grid’;
^ SyntaxError: Unexpected token { …
https://github.com/ant-design/ant-design/issues/22802
💡💡💡
Check the update in below article
Related articles:
