(DT) Ant Design và Material UI là 2 thư viện được nhiều nhà phát triển tiếp cận hiện nay. Với hai công cụ này, bạn có thể dùng cho dự án nào đây? Hãy cùng Dogoo Team so sánh và lựa chọn nhé.
>> Xem thêm:
Hướng dẫn tìm hiểu Unit Test và cách viết Unit Test cho UI
Hướng dẫn cách viết đa ngôn ngữ trong ReactJS
Tổng quan về Ant design
Ant design cũng là một thư viện UI mới ra mắt. Thư viện UI này do Alibaba của Trung Quốc tạo ra và hiện tại nó nhận được rate 75.277 sao trên github.
Với Ant design bạn có thể tạo nhanh cho mình một trang landing page dựa theo template được cung cấp sẵn. Ant cũng có các thư viện dành riêng cho các ngôn ngữ như React, Vue hay Angular.
Tham khảo Ant design với React: https://ant.design/docs/react/introduce
Nhìn chung có thể đánh giá Ant design là tập hợp của hầu hết các thư viện về React. Nó đáp ứng được hầu hết các yêu cầu của project của bạn mà bạn không phải cài thêm bất cứ thư viện nào nữa. Dưới đây là danh sách các Components mà nó cung cấp:
- 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
Hướng dẫn Cài đặt Ant Design:
- Với npm:
npm install antd --save
- Với yarn:
yarn add antd
Hướng dẫn sử dụng Ant Design:
Sau khi hoàn tất cài đặt, bạn chỉ cần import nó vào và sử dụng như các component trong React.
Trong file css, bạn cần import thư viện Ant design như sau:
@import ‘~antd/dist/antd.css’
Đánh giá về Ant Design
1. Ưu điểm:
- Ant design có khả năng mạnh mẽ trong việc xây dựng dashboard UI, hơn hẳn MUI hay Bootstrap.
- Các components trong Ant design rất dễ custom style, bởi vì các tên class của các components đơn giản và dễ nhớ, nên việc override trở nên dễ dàng.
- Việc phân chia layout dễ dàng với component Layout.
2. Nhược điểm
- Document của Ant Design vẫn còn một vài chỗ viết bằng tiếng Trung và chưa được dịch đa ngôn ngữ, đặc biệt là Document của ANTD PRO/UMIJS
- Trên các trang như Stackoverflow, dev.to,… có ít các tài liệu được giải thích hoặc hỗ trợ cho ANTD.
Tổng quan về Material UI
Material UI là một thư viện các React Component và đã được tích hợp thêm cả Google’s Material Design. Theo như những gì được giới thiệu trên trang chủ thì Material được xây dựng nhờ tình cảm đặc biệt với React và Google’s Material Design. Do đó, phần hướng dẫn trên trang chủ của Material UI cũng đã khuyến nghị nên sử dụng Material UI với React.
Material UI đem đến cho trang web của bạn một giao diện hoàn toàn mới, với những button, text field, toggle… được design theo một phong cách mới lạ.
Trang web giới thiệu, hướng dẫn sử dụng, cài đặt… Material UI: https://mui.com/getting-started/installation/
Hướng dẫn Cài đặt Material UI
- Với npm:
npm install @mui/material @emotion/react @emotion/styled
- Với yarn:
yarn add @mui/material @emotion/react @emotion/styled
Hướng dẫn Sử dụng Material UI
Sau khi hoàn thành bước khai báo ở trên thì việc sử dụng các Component rất đơn giản. Bạn cần Component nào thì chỉ việc gọi Component đó. Tất nhiên là tên Component thì bạn phải xem trên tài liệu MUI docs của Material UI rồi. Với rất nhiều components thì có lẽ là đủ cho trang web của bạn.
Đánh giá về Material UI
1. Ưu điểm
- Nhiều tài liệu hướng dẫn, docs dễ đọc, dễ hiểu
- Hỗ trợ theming rất tốt
- Được Google hậu thuẫn mạnh
2. Nhược điểm
Việc custom style cho 1 component của MUI rất khó đối với người mới. Nó là css-in-js, là việc bạn phải css bên trong file js.
Phải install nhiều package, import nhiều khiến code trông rất dài, phức tạp.
So sánh, đánh giá giữa Ant design và Material UI
Ant design vs Material UI: Dự án về Dashboard
- Ant design rất mạnh trong việc tạo dashboard nhờ component Layout. Ngoài ra còn có Ant design pro dựng sẵn các template về dashboard, bạn chỉ cần chọn xem những thành phần nào cần dùng cho dự án của bạn.
- Còn với Material UI thì hỗ trợ khá ít cho dashboard. Nếu muốn tạo một dashboard, bạn cần phải tự làm khá nhiều.
Ant design vs Material UI: Các dự án khác
- Các website developer trên thế giới ưu ái Material UI hơn là Ant design, nên họ thường chọn MUI thay vì Ant design.
- Các dự án lớn nếu không dùng dashboard thì MUI sẽ được đánh giá cao hơn Ant design nhờ lượng components được tạo ra lớn hơn, đa dạng hơn so với Ant design.
Custom style
1. Ant design
- Việc custom, override css của Ant design khá đơn giản, do tên class của các components dễ nhớ. Chúng ta có thể override css của một component như sau, ví dụ với component Button:
- Trong file App.js:
import "./App.css";
import React from "react";
import { Button } from "antd";
const App = () => {
return (
<>
<Button className=”btn”>
Click me
</Button>
</>
);
};
export default App;
- Trong file App.css:
![thư viện ui](https://blog.dogoo.vn/wp-content/uploads/2022/10/app-css-ant-design-dogooteam.jpg)
- Như bạn thấy, chúng ta có thể css override theo 2 cách, cách thứ nhất là đặt tên class cho component, cách thứ 2 là dùng tên class của component đó trong Ant design. Thường tên class của các components sẽ có tiền tố là ‘ant’ và tên của component đó, như ở trên là Button thì sẽ là ‘ant-btn.
- Material UI
- Material UI sử dụng các custom css là css-in-js. Tức là bạn sẽ css ở bên trong file js. Dưới đây là một ví dụ:
![thư viện ui](https://blog.dogoo.vn/wp-content/uploads/2022/10/css-js-material-ui-dogooteam.jpg)
Việc css-in-js khá khó tiếp cận với người mới và nó khiến cho code của một component sẽ rất dài.
Material hỗ trợ 3 kiểu css-in-js đó là:
a. Dùng makeStyles:
Như ví dụ ở trên là dùng makeStyles để custom css. Chúng ta khai báo makeStyles như ở trên.
Nếu như muốn dùng makeStyles, chúng ta cần import vào file js như sau: import { makeStyles } from ‘@mui/styles';
appBar, img, colorItem, collapse, icon chính là tên của các class css. Nếu muốn dùng chúng cho một components, ta sẽ khai báo như sau:
![thư viện ui](https://blog.dogoo.vn/wp-content/uploads/2022/10/khai-bao-class-css-material-ui-dogooteam.jpg)
Chúng ta khai báo classes = useStyles(), sau đó trong component chúng ta gọi classes.appBar, appBar là tên class đã tạo trong useStyles ở trên.
b. Dùng styled (đây là kiểu kết hợp giữa styled component và makeStyles)
- Chúng ta cần import dòng sau vào file js để sử dụng styled:
@import { styled } from ‘@mui/system’;
- Dưới đây là đoạn code mẫu về việc sử dụng styled:
![thư viện ui](https://blog.dogoo.vn/wp-content/uploads/2022/10/styled-material-ui-dogooteam.jpg)
c. Dùng sx props:
Material UI hỗ trợ người dùng css ngay trong component bằng sx props. Tuy nhiên nó không phải là css inline. Dưới đây là một đoạn code mẫu cho việc css bằng sx props:
![thư viện ui](https://blog.dogoo.vn/wp-content/uploads/2022/10/sx-probs-material-ui-dogooteam.jpg)
Kết luận
Sau tất cả việc so sánh, và đánh giá ở trên. Mình đưa ra một vài ý kiến sau:
- Với các dự án sử dụng dashboard, Ant design và Ant design pro hỗ trợ rất mạnh. Bạn nên ưu tiên sử dụng Ant design để xây dựng. Đặc biệt ưu điểm là nó dễ tiếp cận với người mới.
- Với các dự án lớn, cần số lượng lớn component để hỗ trợ, thì bạn nên sử dụng MUI vì số lượng lớn component được xây dựng từ đây. Tuy nhiên cần người có kinh nghiệm và cần tìm hiểu kỹ về API của các components.
Hy vọng với bài viết này của Dogoo Team, bạn sẽ sớm lựa chọn được thư viện phù hợp với dự án của mình
Dogoo Team