convert material ui to ant

colossal-harlequin · 2024-02-25T11:38:17.990Z

My refine project is material UI i want to convert it to Antdesign

K

kapa.ai•2/25/24, 11:38 AM

Hi @jakshire01. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•2/25/24, 11:38 AM

----------------------
To convert your Refine project from Material UI to Ant Design, you would need to follow these steps:

Install the Ant Design package if it's not already installed. You can do this using your package manager:

npm install antd

npm install antd

npm install antd

npm install antd

All Ant Design components that were re-exported from
```
@pankod/refine-antd
```
@pankod/refine-antd
```
@pankod/refine-antd
```
@pankod/refine-antd
have been removed. You need to import them from the
```
antd
```
antd
```
antd
```
antd
package directly. For example:

-import { useTable, SaveButton, Button, Form, Input, Select } from "@pankod/refine-antd";  
  
+import { useTable, SaveButton } from "@refinedev/antd";  
+import { Button, Form, Input, Select } from "antd";

-import { useTable, SaveButton, Button, Form, Input, Select } from "@pankod/refine-antd";  
  
+import { useTable, SaveButton } from "@refinedev/antd";  
+import { Button, Form, Input, Select } from "antd";

-import { useTable, SaveButton, Button, Form, Input, Select } from "@pankod/refine-antd";  
  
+import { useTable, SaveButton } from "@refinedev/antd";  
+import { Button, Form, Input, Select } from "antd";

-import { useTable, SaveButton, Button, Form, Input, Select } from "@pankod/refine-antd";  
  
+import { useTable, SaveButton } from "@refinedev/antd";  
+import { Button, Form, Input, Select } from "antd";

Icons have also been removed from
```
@pankod/refine-antd
```
@pankod/refine-antd
```
@pankod/refine-antd
```
@pankod/refine-antd
. So you need to import icons from the
```
@ant-design/icons
```
@ant-design/icons
```
@ant-design/icons
```
@ant-design/icons
package directly. If the package is not installed, you can install it with your package manager:

npm install @ant-design/icons

npm install @ant-design/icons

npm install @ant-design/icons

npm install @ant-design/icons

Then, you can import icons from the

@ant-design/icons

@ant-design/icons

@ant-design/icons

@ant-design/icons package directly like this:

-import { Icons } from "@pankod/refine-antd";  
-const { EditOutlined } = Icons;  
  
+ import { EditOutlined } from "@ant-design/icons";

-import { Icons } from "@pankod/refine-antd";  
-const { EditOutlined } = Icons;  
  
+ import { EditOutlined } from "@ant-design/icons";

-import { Icons } from "@pankod/refine-antd";  
-const { EditOutlined } = Icons;  
  
+ import { EditOutlined } from "@ant-design/icons";

-import { Icons } from "@pankod/refine-antd";  
-const { EditOutlined } = Icons;  
  
+ import { EditOutlined } from "@ant-design/icons";

If you are using Ant Design version 4.x.x, you need to upgrade to version 5.x.x. You can do this by updating the
```
@refinedev/antd
```
@refinedev/antd
```
@refinedev/antd
```
@refinedev/antd
package to
```
4.x.x
```
4.x.x
```
4.x.x
```
4.x.x
:

npm i @refinedev/antd@latest

npm i @refinedev/antd@latest

npm i @refinedev/antd@latest

npm i @refinedev/antd@latest

Please note that some components were removed or renamed, and some APIs are changed in Ant Design version 5. You can refer to the Ant Design's own migration guide (https://ant.design/docs/react/migration-v5) for more information.

K

kapa.ai•2/25/24, 11:38 AM

Sources:

Migration Guide from 3.x.x to 4.x.x (https://refine.dev/docs/migration-guide/3x-to-4x#pankodrefine-antd-changes)
Ant Design Migration Guide (https://refine.dev/docs/ui-integrations/ant-design/migration-guide)
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------

K

kapa.ai•2/25/24, 11:38 AM

@418995770205929473 kapa.ai is still learning and improving, please let us know how it did by reacting below