national-gold
national-gold2y ago

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
15 Replies
vicious-gold
vicious-gold2y 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.
national-gold
national-gold2y ago
I am using a cutom layout generated by superpalte but have antd.less files in styles folder.
vicious-gold
vicious-gold2y ago
can u share with me that .less file ?
national-gold
national-gold2y ago
vicious-gold
vicious-gold2y ago
@dipbazz sorry for your trouble. we will add this issue our Migration Guide you should add theme='dark' prop to <Menu> in <Sider>
// src/components/layout/sider/index.tsx
<AntdLayout.Sider
collapsible
collapsed={collapsed}
onCollapse={(collapsed: boolean): void => setCollapsed(collapsed)}
collapsedWidth={isMobile ? 0 : 80}
breakpoint='lg'
style={isMobile ? antLayoutSiderMobile : antLayoutSider}>
<RenderToTitle collapsed={collapsed} />
<Menu
theme='dark'
selectedKeys={[selectedKey]}
defaultOpenKeys={defaultOpenKeys}
mode='inline'
onClick={() => {
if (!breakpoint.lg) {
setCollapsed(true)
}
}}>
{renderSider()}
</Menu>
</AntdLayout.Sider>
// src/components/layout/sider/index.tsx
<AntdLayout.Sider
collapsible
collapsed={collapsed}
onCollapse={(collapsed: boolean): void => setCollapsed(collapsed)}
collapsedWidth={isMobile ? 0 : 80}
breakpoint='lg'
style={isMobile ? antLayoutSiderMobile : antLayoutSider}>
<RenderToTitle collapsed={collapsed} />
<Menu
theme='dark'
selectedKeys={[selectedKey]}
defaultOpenKeys={defaultOpenKeys}
mode='inline'
onClick={() => {
if (!breakpoint.lg) {
setCollapsed(true)
}
}}>
{renderSider()}
</Menu>
</AntdLayout.Sider>
national-gold
national-gold2y 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
<ConfigProvider
theme={{
algorithm: [theme.darkAlgorithm],
}}
>
<App />
</ConfigProvider>
<ConfigProvider
theme={{
algorithm: [theme.darkAlgorithm],
}}
>
<App />
</ConfigProvider>
Which again gives me some weird UI on some of my pages.
vicious-gold
vicious-gold2y 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 ?
Omer
Omer2y ago
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
vicious-gold
vicious-gold2y ago
Oh sorry. 😄 doc much easier to read 🙏
national-gold
national-gold2y ago
No description
national-gold
national-gold2y ago
This is what I get when I use darkAlgorithm
vicious-gold
vicious-gold2y 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.
national-gold
national-gold2y ago
Yeah I had custom wrapper Col with background color. I have fixed it and working fine. Thank you for you help.
vicious-gold
vicious-gold2y 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 anymore
national-gold
national-gold2y ago
Okay will remove that file.