harsh-harlequin•2y 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?

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

antd.less

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>

// 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>

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

<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.

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 ?

Omer•2y 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

compatible-crimson•2y ago

Oh sorry. 😄 doc much easier to read 🙏

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 anymore

harsh-harlequin•2y ago

Okay will remove that file.