robust-apricot
robust-apricot4mo ago

convert material ui to ant

My refine project is material UI i want to convert it to Antdesign
2 Replies
kapa.ai
kapa.ai4mo ago
Hi @jakshire01. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To convert your Refine project from Material UI to Ant Design, you would need to follow these steps: 1. 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
2. All Ant Design components that were re-exported from @pankod/refine-antd have been removed. You need to import them from the 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";
3. Icons have also been removed from @pankod/refine-antd. So you need to import icons from the @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
Then, you can import icons from the @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";
4. 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 package to 4.x.x:
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. 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 :speech_balloon: ----------------------
kapa.ai
kapa.ai4mo ago
<@418995770205929473> kapa.ai is still learning and improving, please let us know how it did by reacting below