- Published on
Using Ant Design with NextJS (custom variables for Ant Design)
Day1: Started a new project to learn NextJS. Faced my first hurdle today when trying to setup a NextJS project with Ant Design. Using Ant Design with NextJS was fairly straight forward but when i tried to use custom variables for Ant Design, that's where things got tricky.
You can create a new NextJS project with
yarn create next-app app-name
OR
npx create-next-app app-name
In the NextJS project, install Ant Design with
yarn add antd
OR
npm install --save antd
create a new file called antd.less in the styles folder in the root of the project. Create a styles
folder if you aren't already using one. antd.less
is the file where all your custom variables will go
antd.less
@import "~antd/dist/antd.less";
@primary-color: #000; // 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 layers
You can customise these variables as you wish. Take a look at the Ant Design customisation docs for more.
In the pages
directory create a new file called _app.js
with the following contents
_app.js
import React from "react";
import App from "next/app";
import "../styles/antd.less";
class MyApp extends App {
render() {
const { Component, pageProps } = this.props;
return <Component {...pageProps} />;
}
}
export default MyApp;
You can also import any other global styles here
Right now, your custom variables will have no effect. For that to work you will need to install these packages -
yarn add @zeit/next-css @zeit/next-less @zeit/next-sass babel-plugin-import less
OR
npm install --save @zeit/next-css @zeit/next-less @zeit/next-sass babel-plugin-import less
Now you will need to create a custom NextJS config for your variables to work
next.config.js
const withSass = require("@zeit/next-sass");
const withLess = require("@zeit/next-less");
const withCSS = require("@zeit/next-css");
const isProd = process.env.NODE_ENV === "production";
// fix: prevents error when .less files are required by node
if (typeof require !== "undefined") {
require.extensions[".less"] = (file) => {};
}
module.exports = withCSS({
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]",
},
...withLess(
withSass({
lessLoaderOptions: {
javascriptEnabled: true,
},
})
),
});
With this config you will be able to use less, sass and css modules in your project. Your custom variables for Ant Design will now work
Other posts on topic
- Bundle a React library with ParcelCreate a React library and bundle it with the new Parcel v2. Parts of Parcel are rewritten in Rust and that means it is ...Read →
- Understand how styled-components works by creating a cloneFirst article in a guide on how to build your own styled-components clone. Understand why it is necessary and how to sta...Read →
- React Internals (Part 3) - Fiber ArchitectureAn article explaining how Reacts latest Fiber architecture works and speeds up your websiteRead →