Upgrade from antd 4 to 5 got a weird sider.
I have upgraded my antd package from 4 to 5 and now my side bar looks weird with black and white portion. Should I update my sider style using custom css?
Or can I use antd pro layout for my page layout?
15 Replies
compatible-crimson•2y ago
@dipbazz Hi, sorry for your trouble. We are investigating to issue. but couldn't reproduce on our examples.
Did you customize <Sider> component or are you using default <Layout> from "@pankod/refine-antd"?
Do you have any custom .less or .css files ? maybe .ant-menu css class will be ovverriden.
harsh-harlequin•2y ago
I am using a cutom layout generated by superpalte but have antd.less files in styles folder.
compatible-crimson•2y ago
can u share with me that .less file ?
harsh-harlequin•2y ago
compatible-crimson•2y ago
@dipbazz sorry for your trouble. we will add this issue our Migration Guide
you should add
theme='dark'
prop to <Menu>
in <Sider>
harsh-harlequin•2y ago
Thank you @alicanerdurmaz for your quick response. It is working now.
Is there a way to switch between dark and light theme in refine?
Because I have tried to use
Which again gives me some weird UI on some of my pages.
compatible-crimson•2y ago
We will add theme switch feature probably this week. When you create new refine app, it will come with this feature.
https://github.com/refinedev/refine/pull/3182/commits/d2856f82edd2618f782e6f6b4f596fe8abd50703 if you want, you can follow this commit
Can you share screenshot please ?
Also, you can follow this doc for dark/light mode support ⚡️
https://refine.dev/docs/api-reference/antd/customization/antd-custom-theme/#use-preset-algorithms
compatible-crimson•2y ago
Oh sorry. 😄 doc much easier to read 🙏
harsh-harlequin•2y ago
harsh-harlequin•2y ago
This is what I get when I use
darkAlgorithm
compatible-crimson•2y ago
In header.tsx, probably you have
backgroundColor: '#FFF'
sorry for this. it's came from old superplate
template. we will fix this with new version
do you have any custom wrapper styles on table ? it can be because of this.harsh-harlequin•2y ago
Yeah I had custom wrapper
Col
with background color. I have fixed it and working fine. Thank you for you help.compatible-crimson•2y ago
By the way, .less files probably not work. Ant Design now uses and recommends css-in-js.
you can remove
antd.less
file. it's not necessary anymoreharsh-harlequin•2y ago
Okay will remove that file.