(DT) Ant Design and Material UI are two libraries that are used by most developers today. With these two UI Libraries, what projects can you use them for? Let’s compare and choose with Dogoo Team.
>> Xem thêm:
Unit Test: What it is and Guide for UI components
How to add Multi-Language Support in ReactJS
Overview about Ant design
Ant design is another new UI library. This UI library was created by Alibaba of China and it currently has a rating of 75,277 stars on github.
With Ant design you can quickly create your own landing page based on the provided template. Ant also has libraries for popular languages like React, Vue or Angular.
Ant design with React: https://ant.design/docs/react/introduce
In general, Ant design can be evaluated as a collection of most React libraries. It almost meets your project’s requirements without you having to install any additional libraries. Here is a list of the Components it provides:
- General: Button, Icon
- Layout: Grid, Layout
- Navigation: Affix, Breadcrumb, Dropdown, Menu, Pagination, Steps
- Data Entry: AutoComplete, Checkbox, Cascader, DatePicker, Form, InputNumber, Input, Mention, Rate, Radio, Switch, Slider, Select, TreeSelect, Transfer, TimePicker, Upload
- Data Display: Avatar, Badge, Collapse, Carousel, Card, Calendar, List, Popover, Tree, Tooltip, Timeline, Tag, Tabs, Table
- Feedback: Alert, Drawer, Modal, Message, Notification, Progress, Popconfirm, Spin, Skeleton
- Other: Anchor, BackTop, Divider, LocaleProvider
How to set up Ant Design:
- Via npm:
npm install antd --save
- Via yarn:
yarn add antd
How to use Ant Design:
Once the installation is complete, you can simply import it and use it as components in React.
In css file, you need to import Ant design library as following:
@import ‘~antd/dist/antd.css’
Reviews of Ant Design
1. Advantages:
- Ant design has a powerful ability to build dashboard UI, much better than MUI or Bootstrap.
- Components in Ant design are easy to be customized, because the class names of the components are simple and easy to remember, making it easy to override.
- Layout division is easy thanks to the Layout component.
2. Disadvantages:
- Ant Design’s Document still has a few parts written in Chinese and has not been translated into multiple languages, especially ANTD PRO/UMIJS Document
- On sites like Stackoverflow, dev.to, etc., there is little documentation explaining or supporting for ANTD.
Overview of Material UI
Material UI is a library of React Components and has been integrated with Google’s Material Design. According to what is introduced on the homepage, Material is built in with a special love for React and Google’s Material Design. Therefore, the tutorial on the Material UI homepage also recommends using Material UI with React.
Material UI gives your website a completely new look. You can find buttons, text fields, toggles… designed in a new style.
Read more about Material UI: https://mui.com/getting-started/installation/
How to set up Material UI
- Via npm:
npm install @mui/material @emotion/react @emotion/styled
- Via yarn:
yarn add @mui/material @emotion/react @emotion/styled
How to Use Material UI
After completing the above declaration step, using Components is very simple. You just call the Component you need. You must see the Component name you need on the documentation (MUI docs by Material UI). A range of components are what you need for your products.
Reviews of Material UI
1. Advantages
- Many manuals, docs easy to read, easy to understand
- Very good theming support
- Strongly backed by Google
2. Disadvantages
- Customizing a MUI component is very difficult for newbie. It is css-in-js, you have to place css into the js file.
- Having to install many packages and import a lot makes the code look very long and complicated.
Ant design vs Material UI: Comparision
Ant design vs Material UI: Project with Dashboard
- Ant design is very powerful in creating dashboards thanks to the Layout component. There’s also Ant design Pro built-in dashboard templates, you just need to choose which components to use for your project.
- As for Material UI, there is little support for dashboards. If you want to create a dashboard, you to do a lot yourself.
Ant design vs Material UI: Other Projects
- Website developers around the world love Material UI over Ant Design, so they often choose MUI other than Ant Design.
- If big projects do not have dashboards, MUI will be appreciated more than Ant design thanks to the larger and more diverse number of components created than Ant design.
Custom style
1. Ant design
The custom, override css of Ant design is quite simple, because the class names of the components are easy to remember. We can override the css of a component as follows, for example with the Button component:
+ In App.js file:
import "./App.css";
import React from "react";
import { Button } from "antd";
const App = () => {
return (
<>
<Button className=”btn”>
Click me
</Button>
</>
);
};
export default App;
+ In App.css file:
- As you can see, we can override css in two ways, the first way is to name the component’s class, the second way is to use the class name of that component in Ant design. Usually the class name of components will be prefixed with ‘ant’ and the name of that component, as above, Button will be ‘ant-btn.
- Material UI
- Material UI use css-in-js as custom css. That mean you will place css in js file. Here is an example:
The css-in-js is quite difficult to reach for newbies and it makes the code of a component will be very long.
Material UI support 3 types of css-in-js:
a. Using makeStyles:
The example above is using makeStyles to custom css. We declare makeStyles as above.
If we want to use makeStyles, we need to import it into the js file as follows: import { makeStyles } from ‘@mui/styles';
appBar, img, colorItem, collapse, icon are name of class css. If we wanted to use them for a component, we would declare them like this:
We declare classes = useStyles(), then in the component we call classes.appBar, appBar is the name of the class created in useStyles above.
b. Using styled (this is a combination of styled component and makeStyles)
- We need to import the following line into our js file to use styled:
@import { styled } from ‘@mui/system’;
- Here is a sample code of using styled:
c. Using sx props:
Material UI supports user css right in the component using sx props. However it is not inline css. Here is a sample code for css using sx props:
Conclusion
After all the comparisons, and reviews above, ihave a few comments below:
- For projects using dashboards, Ant design and Ant design pro are very supportive. You should prioritize using Ant design to build. Especially the advantage is that it is easily accessible to newbies.
- For large projects that need a large number of components to support, you should use MUI because of the large number of components built in. However, need someone with experience and need to learn carefully about the API of components.
Hopefully, this article from Dogoo Team will soon choose the right library for your project
Dogoo Team