Migration Guide

@pankod/refine-antd must be updated to 4.x.x

npm run refine update

npm i @pankod/refine-antd@latest

@pankod/refine-codemod package handles the breaking changes for your project automatically, without any manual steps. It migrates your @pankod/refine-antd version from 3.x.x to 4.x.x.

Just cd into root folder of your project (where package.json is contained) and run this command:

npx @pankod/refine-codemod antd4-to-antd5

And it's done. Now your project uses @pankod/refine-antd@4.x.x.

🚨 Customized or swizzled components and .less files cannot be migrated automatically. You need to migrate them manually.

• CSS files are no longer included in package. Since CSS-in-JS supports importing on demand, the original styles/antd.less has also been abandoned. If you need to reset some basic styles, please import @pankod/refine-antd/dist/reset.css

- import "@pankod/refine-antd/dist/styles.min.css";
+ import "@pankod/refine-antd/dist/reset.css";

actionButtons and pageHeaderProps props was deprecated on @pankod/refine-antd@3.x.x and removed on @pankod/refine-antd@4.x.x from <List>, <Create>, <Edit>, <Show> component due to incosistency with all UI packages. Use headerButtons and headerProps props instead.

- <List actionButtons={actionButtons} pageHeaderProps={pageHeaderProps}>
+ <List headerButtons={actionButtons} headerProps={pageHeaderProps}>

- <Create actionButtons={actionButtons} pageHeaderProps={pageHeaderProps}>
+ <Create headerButtons={actionButtons} headerProps={pageHeaderProps}>

- <Show actionButtons={actionButtons} pageHeaderProps={pageHeaderProps}>
+ <Show headerButtons={actionButtons} headerProps={pageHeaderProps}>

- <Edit actionButtons={actionButtons} pageHeaderProps={pageHeaderProps}>
+ <Edit headerButtons={actionButtons} headerProps={pageHeaderProps}>

If you have customized or swizzled the <Sider> component, there may be a color mismatch issue. You can give theme dark to the <Menu> component in the <Sider> component.

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

If you have customized or swizzled the <Header> component, there may be a color mismatch issue. You can remove constant background color in <Header> component.

   <AntdLayout.Header
      style={{
        display: 'flex',
        justifyContent: 'flex-end',
        alignItems: 'center',
        padding: '0px 24px',
        height: '64px',
-       backgroundColor: '#FFF',
      }}>

Ant Design removed less, uses and recommends CSS-in-JS instead. You need to manually migrate your .less files to CSS-in-JS. Ant Design's documentation for less migration.

Some users repored (issue#1, issue#2) compile errors after upgrading from @pankod/refine-antd@3.x.x to @pankod/refine-antd@4.x.x. They also provided solutions.

1. remove node_modules folder
2. remove package-lock.json file
3. npm install