-
Just upgraded my site locally to antd v5 and I'm seeing They're adding a lot of styles that I don't like (they seem to be overriding a lot of styles v4.x didn't touch). I want to change a lot of these back. Also not the cleanest looking class either. Is there a way to remove these styles/classes? |
Beta Was this translation helpful? Give feedback.
Replies: 25 comments 54 replies
-
This prefix |
Beta Was this translation helpful? Give feedback.
-
Any idea with this warning ? |
Beta Was this translation helpful? Give feedback.
-
I have the same issue, what we should do with this ? Ant v5 It's adding this class on all components and breaking some of them |
Beta Was this translation helpful? Give feedback.
-
I'm having the same mismatch issue using Nextjs@v13 with antd@v5 |
Beta Was this translation helpful? Give feedback.
-
Same issue, i don't understand how |
Beta Was this translation helpful? Give feedback.
-
same, pls remove it |
Beta Was this translation helpful? Give feedback.
-
The reason for the css class causing problem is its how the css-in-js is attributed to the styling of the project. The order of priority for inline styling is higher than any stylesheet. This results in having to override with The docs for the V4 to V5 transition are currently lacking on how to properly implement the styling change. After some serious digging I was able to find this resource: https://ant-design.github.io/antd-token-previewer/~demos/docs-theme-editor-simple Its an interactive editor to help you with the themeing of the V5 styles. However, be warned its very buggy and you will still need some overrides. Some of the tokens dont map properly to the components yet so its been a very long process to get my theme transported from V4->V5. It will help though. |
Beta Was this translation helpful? Give feedback.
-
It breaks my v4 project's style :( |
Beta Was this translation helpful? Give feedback.
-
same issue zhangyuang/ssr#251 |
Beta Was this translation helpful? Give feedback.
-
Can some mantainer please say something? It's a ghost town of people without even knowing what to do and without proper documentation |
Beta Was this translation helpful? Give feedback.
-
My project's styles have been broken a lot in ant v5. We have been using styled-component to override some Ant CSS. And the |
Beta Was this translation helpful? Give feedback.
-
How to remove |
Beta Was this translation helpful? Give feedback.
-
I found the hacky solution You need to pass to ConfigProvider component theme with "hashed: false" like this: |
Beta Was this translation helpful? Give feedback.
-
see related post https://ant.design/docs/blog/css-in-js |
Beta Was this translation helpful? Give feedback.
-
Dynamic hash in dev mode has been replaced with stable one: #39069 |
Beta Was this translation helpful? Give feedback.
-
To be honest I am shocked how antd behaves in 5.x. The styling is impossible to override (with the exception of some of the stuff that is inside the theme.json). Things are documented nowhere, all is just odd. Very frustrating! |
Beta Was this translation helpful? Give feedback.
-
so do we have any update on this issue. I have the same issue too |
Beta Was this translation helpful? Give feedback.
-
Actually I'm really strange that it's so easy to test it but most of you just say it can't override styles bal bal something like that. the for example, if two mirco app have different version of antd v5, the hash of these antd instance will be different. So A app's antd style won't affect B app's antd style due to they have different hash classes. If we want to use hash class to scope antd style, we all know that it will rise the priority and make it difficult to override. But thanks to |
Beta Was this translation helpful? Give feedback.
-
Can this class be turned off? it is causing me problems with SSR as it will yield different classes on the Server vs the Client: |
Beta Was this translation helpful? Give feedback.
-
This broke the Styles of my current project, how sad |
Beta Was this translation helpful? Give feedback.
-
I commented this line in my Next js app. And it worked for me. ` const initialProps = await Document.getInitialProps(ctx); |
Beta Was this translation helpful? Give feedback.
-
check this out |
Beta Was this translation helpful? Give feedback.
-
why are these styles added? how do I remove them? They just make things worse |
Beta Was this translation helpful? Give feedback.
-
I found that the documentation has been updated. Ant Design supports configuring layer for unified downgrade since 5.17.0. After the downgrade, the style of antd will always be lower than the default CSS selector priority, so that users can override the style (please be sure to check the browser compatibility of @layer):
|
Beta Was this translation helpful? Give feedback.
css-dev-only
class won't avoid overriding style. you can try with this demo. You can still override style as same as v4.Actually I'm really strange that it's so easy to test it but most of you just say it can't override styles bal bal something like that.
the
css-dev-only-hash
actually usage is that avoid style conflict in application with mutliple instances of antd ,like micro-frontend.for example, if two mirco app have different version of antd v5, the hash of these antd instance will be different. So A app's antd style won't affect B app's antd style due to they have different hash classes.
If we want to use hash class to scope antd style, we all know that it will rise the priority…