Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
rriski opened this issue Apr 6, 2021 · 6 comments
Closed

Comments

@rriski
Copy link

rriski commented Apr 6, 2021

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: 418ec5c.

@SolidZORO
Copy link
Owner

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.

@SolidZORO
Copy link
Owner

Of course, all of these changes were made just so that the changes to antd less vars would take effect immediately.

@morellodev
Copy link

@import '~antd/lib/style/themes/default.less';

It would be better to specify in the README that the default Ant variables file must be imported 😃

@rriski
Copy link
Author

rriski commented Apr 9, 2021

Confirming that adding @import '~antd/lib/style/themes/default.less'; to the override file resolves this issue.

@akay0214
Copy link

akay0214 commented May 6, 2021

Doesn't work for Antd 4.15+

@cbfn
Copy link

cbfn commented Jun 30, 2021

Any solution for this?

My antd version is 4.16.5 using latest next.js and tailwindcss

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants