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?
![No description](https://cdn.answeroverflow.com/1054689444315287592/Screenshot_from_2022-12-20_14-56-33.png)
15 Replies
unwilling-turquoise•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.
extended-salmon•2y ago
I am using a cutom layout generated by superpalte but have antd.less files in styles folder.
unwilling-turquoise•2y ago
can u share with me that .less file ?
extended-salmon•2y ago
unwilling-turquoise•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>
extended-salmon•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.
unwilling-turquoise•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
unwilling-turquoise•2y ago
Oh sorry. 😄 doc much easier to read 🙏
extended-salmon•2y ago
![No description](https://cdn.answeroverflow.com/1054712578401636392/Screenshot_from_2022-12-20_16-35-39.png)
extended-salmon•2y ago
This is what I get when I use
darkAlgorithm
unwilling-turquoise•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.extended-salmon•2y ago
Yeah I had custom wrapper
Col
with background color. I have fixed it and working fine. Thank you for you help.unwilling-turquoise•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 anymoreextended-salmon•2y ago
Okay will remove that file.