question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

antd theme customization broken with next-plugin-antd-less versions >= 1.0.0

See original GitHub issue

Steps to reproduce:

  1. git clone https://github.com/rriski/next-plugin-antd-less
  2. yarn && yarn dev
  3. Table background is red and table header background is blue as specified in assets/antd-custom.less.
  4. Update next-plugin-antd-less to version 1.0.5.
  5. yarn && yarn dev
  6. Table background and header color are not changed from the default values.

The repo follows https://github.com/vercel/next.js/tree/canary/examples/with-ant-design-less with next-plugin-antd-less added. This plugin supported customizing the antd theme (https://ant.design/docs/react/customize-theme) prior to v1.0.0.

I suppose this commit is to blame: https://github.com/SolidZORO/next-plugin-antd-less/commit/418ec5c7a57153af00cc7632fbbc21b5a8b1e7e9.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:4
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

7reactions
akay0214commented, May 6, 2021

Doesn’t work for Antd 4.15+

6reactions
SolidZOROcommented, Apr 7, 2021

this file https://github.com/rriski/next-plugin-antd-less/blob/main/assets/antd-custom.less

will change to

@import '~antd/lib/style/themes/default.less';   <-- You need to import it at once in your project

@primary-color: #52c41a;
//
//@table-bg: "red";           <-- 'red' is not a valid css value.
//@table-header-bg: "blue";

@table-bg: red;
@table-header-bg: blue;

The previous version used ‘less-vars-to-js’ to help with the conversion and the problem may have been hidden, but now I’ve removed ‘less-vars-to-js’. The problem came up.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Customization of theme is broken with latest version of less ...
(Follow the entire guide to customize theme for antd) ... Customization still works fine if the version of less loader is ~v5.
Read more >
Customize Theme - Ant Design
Ant Design allows you to customize our design tokens to satisfy UI diversity from business or brand requirements, including primary color, border radius, ......
Read more >
There is a problem that Customize Ant Design Theme is not ...
I am customizing the theme of antd while using next.js. ... withAntdLess = require('next-plugin-antd-less'); module.exports = withAntdLess({ ...
Read more >
How to Customize Ant Design Theme in a Next.js App
In this article I will show you how to customize the default Ant Design theme in a Next.js project.
Read more >
How to customize Ant design theme for Next.js
Install next-plugin-antd-less. the customization guide that you will find in the official site of ant design won't work. this simplest way ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found