search

SolidZORO / next-plugin-antd-less

🎩 Use Antd (Less) with Next.js v12, Zero Dependency on other Next-Plugins.
MIT License
345 stars 48 forks source link

tinyColor.less from antd overriding my own styles #54

Closed kseanjbz closed 3 years ago

kseanjbz commented 3 years ago

I am using your package (1.1.4) and it is loading tinyColor.less after my own css files causing certain antd components to not be rendered with my styles (.ant-btn {}, etc) . Any ideas why this may be happening?

SolidZORO commented 3 years ago

can you show an example repo?

kseanjbz commented 3 years ago

I was trying to reproduce it a while back with your mkn repo to ensure if it is on my end or not, so it is using a slightly older version of your mkn repo. I do apologize for absolutely butchering your code. I was trying to delete a lot of it as I was trying to figure out the cause of the issue.

Example Repo: https://github.com/kseanjbz/mkn_bug_demo

steps to reproduce:

  1. yarn install
  2. yarn dev (sometimes i had to exit and run again)
  3. navigate to http://localhost:3000/about
  4. notice the button is not red
  5. In line 30 of MasterLayout.tsx, uncomment it
  6. refresh localhost page
  7. notice how both are now red

Same thing is happening in my app where seemingly random things like this was breaking my app. One was an import of a component which only contained divs and nothing else but it broke the styling. Thanks for looking at this SolidZORO!

SolidZORO commented 3 years ago

I tried to run your case and found that it worked fine, uncommented the Button and found that the .test did not take effect immediately, but after refreshing the page everything worked fine.

I think this is some disadvantage of SSR compared to CSR, the mechanism of code hot update is not the same. Anyway I think this is normal, or can you describe in more detail what is wrong there? Recording a video would be fine.

BTW, the project didn't run because of the missing @THEME--DARK variable, then I added a ~ to the front of vars, like this @THEME--DARK: ~'theme-dark'; and it worked.

kseanjbz commented 3 years ago

The problem is I always expected the button to be red and the .test to take effect, but on initial load it isn't unless the other button is loaded. Why would commenting out the button change anything? Very strange indeed.

https://user-images.githubusercontent.com/17588941/117578116-9c186600-b0a1-11eb-9c60-6e0db524c8e0.mov

SolidZORO commented 3 years ago

ohhhh! It seems to be a css order issue with next.js, which is particularly bad on antd.

You can write an extra layer of button.text {} or use !important.

kseanjbz commented 3 years ago

Exactly. I'm trying to figure out why the css ordering can flip so randomly. Using button.text or !important isn't really a feasible solution for my app.

SolidZORO commented 3 years ago

😂 https://github.com/vercel/next.js/search?q=css+order&type=issues