07/10/2022

MUI là gì? MUI có thể được sử dụng như thế nào trong các dự án ReactJS?

MUI là gì?  MUI có thể được sử dụng như thế nào trong các dự án ReactJS?

Vào tháng 9 năm 2021, công ty trước đây có tên là Material-UI đã đổi tên thành MUI. Sự thay đổi này chủ yếu xảy ra do nhiều người không thể phân biệt Material-UI với Material Design (một hệ thống thiết kế).

MUI khởi đầu là một triển khai của Material Design, được thiết kế đặc biệt cho các ứng dụng React. Ngày nay, thương hiệu đang mở rộng và tìm cách tạo ra một hệ thống thiết kế mới sẽ thay thế cho Material Design.

Từ viết tắt MUI là viết tắt của Material to build UI và trong bài viết này, bạn sẽ tìm hiểu chính xác cách sử dụng MUI để xây dựng giao diện người dùng React.

Làm thế nào để truy cập MUI trong React?

MUI có sẵn dưới dạng gói npm. Do đó, tất cả những gì bạn cần làm để truy cập nó là thực thi dòng mã sau trong React:

npm install @ mui / material @ feel / reaction @ cảm xúc / theo kiểu

Giả sử rằng bạn đã cài đặt React trên thiết bị của mình, bạn có toàn quyền truy cập vào thư viện MUI và tất cả các thành phần của nó. MUI có hơn một trăm thành phần khác nhau thuộc một trong các loại sau:

Đầu vàoData DisplayFeedbackSurfacesNavigationLayoutUtilsData GridDate / Time

Sau khi cài đặt MUI dưới dạng gói npm, việc sử dụng thư viện trong dự án của bạn rất đơn giản. Chỉ cần nhập phần tử được yêu cầu vào tệp thích hợp và chèn các tùy chọn tạo kiểu tại các vị trí cụ thể trong giao diện người dùng.

Nếu bạn muốn tạo trang đăng nhập cho ứng dụng React của mình, một số thành phần MUI mà bạn có thể sử dụng sẽ giúp bạn tiết kiệm thời gian và giúp bạn tạo một thiết kế sạch sẽ.

Tạo thành phần đăng nhập trong React

Để tạo một thành phần mới trong React, chỉ cần điều hướng đến thư mục src của React và tạo một thư mục thành phần mới. Thư mục thành phần có thể là nơi lưu trữ tất cả các thành phần, bắt đầu với thành phần Đăng nhập.

File Signin.js

nhập React từ ‘react’; function Signin () {return (

); } xuất Đăng nhập mặc định;

Sau khi tạo thành phần Đăng nhập, đã đến lúc liên kết nó với ứng dụng React bằng cách nhập thành phần Ứng dụng (nằm trong thư mục src).

Đã cập nhật tệp App.js

nhập React từ ‘react’; nhập Đăng nhập từ ‘./components/Signin’; function App () {return (

See also  Cách thay đổi kích thước hình ảnh PowerPoint bằng Macro

); } xuất ứng dụng mặc định;

Bây giờ bạn có thể bắt đầu khám phá các thành phần MUI bạn muốn sử dụng trên trang đăng nhập của mình.

Thành phần của Typography là gì?

Thành phần Kiểu chữ thuộc loại hiển thị dữ liệu của MUI và có 13 biến mặc định, bao gồm:

h1h2h3h4h5h6subtitle1subtitle2body1body2buttoncaptionoverline

Biến bạn chọn phải phụ thuộc vào văn bản bạn muốn hiển thị. Ví dụ: nếu bạn muốn hiển thị tiêu đề, bạn có thể sử dụng bất kỳ biến nào trong số 6 biến tiêu đề trong giao diện người dùng của mình. Chỉ cần chèn biến prop và giá trị đã chọn vào phần tử Typography.

Sử dụng ví dụ về phần tử Kiểu chữ

nhập React từ ‘react’; nhập kiểu chữ từ ‘@ mui / material / Typography’; function Signin () {return (

Đăng nhập

); } xuất Đăng nhập mặc định;

Một điểm quan trọng khác từ đoạn mã trên là mỗi khi bạn chèn một thành phần mới vào giao diện người dùng, bạn cũng sẽ cần nhập nó ở đầu tệp thành phần React của mình. Cập nhật thành phần Đăng nhập với thành phần Kiểu chữ (như trong đoạn mã trên) sẽ tạo ra kết quả sau trong trình duyệt của bạn:

Thành phần kiểu chữThành phần kiểu chữ

Thành phần Trường Văn bản là gì?

Thành phần Trường Văn bản là kiểu đầu vào. Thành phần này có hai chức năng đơn giản; nó cho phép người dùng nhập hoặc chỉnh sửa văn bản trong giao diện người dùng. Thành phần Trường Văn bản sử dụng 3 biến, cụ thể là được phác thảo, điền đầy đủ và tiêu chuẩn, với phác thảo là tùy chọn mặc định. Do đó, nếu bạn muốn sử dụng thành phần Trường Văn bản mặc định, bạn không cần bao gồm hỗ trợ biến. Thành phần Trường Văn bản cũng sử dụng một số đạo cụ khác, bao gồm nhãn, bắt buộc, loại, id, bị vô hiệu hóa, v.v.

Sử dụng ví dụ về thành phần Trường Văn bản

nhập React từ ‘react’; nhập TextField từ ‘@ mui / material / TextField’; nhập kiểu chữ từ ‘@ mui / material / Typography’; function Signin () {return (

Đăng nhập

); } xuất Đăng nhập mặc định;

Đoạn mã trên sẽ tạo ra kết quả sau trong trình duyệt của bạn:

Thành phần trường văn bảnThành phần trường văn bản

Thành phần liên kết là gì?

Như tên cho thấy, phần tử Liên kết hoạt động giống như một liên kết CSS thuần túy. Nó nằm trong danh mục điều hướng, có href truyền thống và các đạo cụ mục tiêu. Ngoài ra, nó có một gạch chân chống, màu sắc và biến.

See also  Điện thoại Android của bạn đang sử dụng chip Snapdragon, Exynos, MediaTek hay Tensor?

Tuy nhiên, không cần sử dụng bất kỳ đạo cụ bổ sung nào trừ khi bạn muốn liên kết của mình trông độc đáo. Ví dụ: giá trị mặc định của đề xuất được gạch chân là “luôn luôn” và hai giá trị khác mà bạn có thể gán cho đề xuất là “không có” và “di chuột”.

Do đó, bạn chỉ cần thêm dấu gạch chân vào phần tử của mình khi bạn không muốn dấu gạch dưới hoặc muốn nó có trạng thái di chuột.

Sử dụng Liên kết. ví dụ thành phần

quên mật khẩu?

Chèn mã trên vào thành phần Đăng nhập hiện có của bạn sẽ tạo ra kết quả sau trong trình duyệt:

Liên kết các thành phầnLiên kết các thành phần

Thành phần nút là gì?

Thành phần Nút cũng thuộc loại đầu vào và tuân theo chức năng chung của một nút – để truyền đạt các hành động của người dùng với ứng dụng. Thành phần này sử dụng một trong ba biến (văn bản, chứa và dàn ý) và mỗi biến có thể xuất hiện ở một trong ba trạng thái – chính, vô hiệu hóa và liên kết.

Biến mặc định của thành phần Nút là văn bản. Do đó, nếu bạn muốn một nút có hình dạng khác, bạn sẽ cần sử dụng biến prop tương ứng. Ngoài hỗ trợ biến, thành phần Nút cũng có một trình xử lý nhấp chuột và một giá đỡ màu (màu), trong số các thành phần khác.

Sử dụng Nút. ví dụ thành phần

Chèn mã trên vào thành phần Đăng nhập sẽ cập nhật giao diện người dùng của bạn trông giống như sau:

Thành phần nútThành phần nút

Bây giờ bạn có một nút tương tác khi di chuột. Nhưng tất cả các thành phần đều nằm ngang và trông không đẹp.

Thành phần Box là gì?

Thành phần Box là chính xác những gì bạn cần để tổ chức các thành phần widget (chẳng hạn như các thành phần Nút) trong một ứng dụng React. Thành phần Box sử dụng một sx prop, có quyền truy cập vào tất cả các thuộc tính hệ thống (chẳng hạn như chiều cao và chiều rộng) mà bạn cần để tổ chức các phần tử giao diện người dùng của mình.

See also  6 trình tạo bóng Minecraft tốt nhất năm 2021

Sử dụng Hộp. ví dụ thành phần

nhập React từ ‘react’; import Link từ ‘@ mui / material / Link’; nhập TextField từ ‘@ mui / material / TextField’; nhập kiểu chữ từ ‘@ mui / material / Typography’; nhập {Nút, Hộp} từ ‘@ mui / material’; function Signin () {return (

Ký tên In quên mật khẩu?

); } xuất Đăng nhập mặc định;

Bằng cách bao quanh thành phần Hộp bằng các phần tử tiện ích (và sử dụng sx prop) trong đoạn mã trên, bạn sẽ tạo ra một cấu trúc cột linh hoạt một cách hiệu quả. Đoạn mã trên sẽ tạo trang đăng nhập React sau trong trình duyệt của bạn:

Hộp linh kiệnHộp linh kiện

Thành phần MUI Grid là gì?

Grid là một thành phần MUI hữu ích khác để tìm hiểu. Nó thuộc loại bố cục của MUI và tạo điều kiện cho khả năng phản hồi. Nó cho phép các nhà phát triển đạt được thiết kế đáp ứng nhờ hệ thống bố cục 12 cột. Hệ thống bố cục này sử dụng 5 điểm ngắt mặc định của MUI để tạo ứng dụng thích ứng với mọi kích thước màn hình. Các điểm ngắt này bao gồm:

xs (cực nhỏ và bắt đầu từ 0px) sm (nhỏ và bắt đầu từ 600px) md (vừa và bắt đầu từ 900px) lg (lớn và bắt đầu từ 1200px) xl (cực lớn và bắt đầu từ 1536px)

Thành phần MUI Grid hoạt động giống như thuộc tính CSS flexbox ở chỗ nó có hệ thống cha-con một chiều dựa trên hai kiểu bố cục – vùng chứa (cha) và các mục (con). Tuy nhiên, thành phần MUI Grid tạo điều kiện cho một lưới lồng nhau trong đó một mục cũng có thể là một vùng chứa.

Bài viết này hướng dẫn bạn cách cài đặt và sử dụng thư viện MUI trong các ứng dụng React. Bạn học cách sử dụng một số yếu tố cơ bản (chẳng hạn như Kiểu chữ) và một số yếu tố cấu trúc nâng cao hơn (chẳng hạn như thành phần Hộp).

Thư viện MUI dễ sử dụng, hiệu quả và hoạt động tốt với các ứng dụng React. Nhưng điều đó không có nghĩa đó là tùy chọn tạo kiểu duy nhất dành cho các nhà phát triển React. Nếu bạn đang xây dựng một ứng dụng React, bạn có thể thoải mái sử dụng thư viện MUI hoặc bất kỳ khung CSS nào để tạo kiểu cho ứng dụng của mình.