Skip to main content

Cài đặt Material UI

Cài đặt Material UI, framework React UI phổ biến nhất thế giới.

Cài đặt mặc định​

Chạy một trong các lệnh sau để thêm Material UI vào dự án của bạn:

npmpnpmsợi len

Sao chép

npm install @mui/material @emotion/react @emotion/styled

Phụ thuộc ngang hàng​

Xin lưu ý rằng react và react-dom là các thành phần phụ thuộc ngang hàng, nghĩa là bạn phải đảm bảo chúng được cài đặt trước khi cài đặt Material UI.

"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0",
  "react-dom": "^17.0.0 || ^18.0.0"
},

Sao chép

Với các thành phần được tạo kiểu​

Material UI sử dụng Emotion làm công cụ tạo kiểu mặc định. Nếu bạn muốn sử dụng styled-components thay thế, hãy chạy một trong các lệnh sau:

npmpnpmsợi len

Sao chép

npm install @mui/material @mui/styled-engine-sc styled-components

Tiếp theo, hãy làm theo hướng dẫn về styled-components để cấu hình đúng trình đóng gói của bạn nhằm hỗ trợ @mui/styled-engine-sc.

Tính đến cuối năm 2021, styled-components không tương thích với các dự án Material UI được kết xuất trên máy chủ. Nguyên nhân là do babel-plugin-styled-componentskhông thể hoạt động với styled()tiện ích bên trong @muicác gói. Xem sự cố GitHub này để biết thêm chi tiết.

Chúng tôi thực sự khuyên bạn nên sử dụng Emotion cho các dự án SSR.

Phông chữ Roboto​

Material UI sử dụng phông chữ Roboto theo mặc định. Thêm phông chữ này vào dự án của bạn thông qua Fontsource hoặc với Google Fonts CDN.

npmpnpmsợi len

Sao chép

npm install @fontsource/roboto

Sau đó, bạn có thể nhập nó vào điểm nhập của mình như thế này:

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

Sao chép

Fontsource có thể được cấu hình để tải các tập hợp con, độ đậm và kiểu cụ thể. Cấu hình kiểu chữ mặc định của Material UI chỉ dựa trên độ đậm phông chữ 300, 400, 500 và 700.

Phông chữ web của Google​

Để cài đặt Roboto thông qua Google Web Fonts CDN, hãy thêm đoạn mã sau vào <head />thẻ dự án của bạn:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
/>

Sao chép

Biểu tượng​

Để sử dụng thành phần Biểu tượng phông chữ hoặc Biểu tượng SVG Material được dựng sẵn (chẳng hạn như những biểu tượng được tìm thấy trong bản demo biểu tượng ), trước tiên bạn phải cài đặt phông chữ Biểu tượng Material . Bạn có thể thực hiện việc này bằng npm hoặc bằng Google Web Fonts CDN.

npmpnpmsợi len

Sao chép

npm install @mui/icons-material

Phông chữ web của Google​

Để cài đặt phông chữ Material Icons vào dự án của bạn bằng Google Web Fonts CDN, hãy thêm đoạn mã sau vào <head />thẻ của dự án:

Để sử dụng Iconthành phần phông chữ, trước tiên bạn phải thêm phông chữ Material Icons . Sau đây là một số hướng dẫn về cách thực hiện. Ví dụ, thông qua Google Web Fonts:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>

Sao chép

Mạng lưới phân phối nội địa​

Bạn có thể bắt đầu sử dụng Material UI ngay lập tức với cơ sở hạ tầng front-end tối thiểu bằng cách cài đặt thông qua CDN, đây là lựa chọn tuyệt vời để tạo nguyên mẫu nhanh.

Hãy làm theo ví dụ CDN này để bắt đầu.

Chúng tôi không khuyến nghị sử dụng phương pháp này trong sản xuất. Nó yêu cầu khách hàng phải tải xuống toàn bộ thư viện—bất kể thành phần nào thực sự được sử dụng—điều này ảnh hưởng tiêu cực đến hiệu suất và việc sử dụng băng thông.

5:11:14 AM