Skip to main content

Bài 03-Cách sử dụng

Tìm hiểu những kiến ​​thức cơ bản về cách làm việc với các thành phần Material UI.

Bắt đầu nhanh​

Sau khi cài đặt , bạn có thể nhập bất kỳ thành phần Material UI nào và bắt đầu chơi. Ví dụ, hãy thử thay đổi varianttrên Button thành để outlinedxem kiểu thay đổi như thế nào:

Xin chào thế giới

Tiếng ViệtTS

Thu gọn mã

import * as React from 'react';
import Button from '@mui/material/Button';

export default function ButtonUsage() {
  return <Button variant="contained">Hello world</Button>;
}

Nhấn Enterđể bắt đầu chỉnh sửa

Toàn cầu​

Vì các thành phần Material UI được xây dựng để hoạt động độc lập nên chúng không yêu cầu bất kỳ kiểu nào có phạm vi toàn cục. Để có trải nghiệm người dùng và nhà phát triển tốt hơn, chúng tôi khuyên bạn nên thêm các thành phần toàn cục sau vào ứng dụng của mình.

Thẻ meta phản hồi​

Material UI là thư viện thành phần ưu tiên thiết bị di động —trước tiên chúng tôi viết mã cho thiết bị di động, sau đó mở rộng các thành phần khi cần thiết bằng cách sử dụng truy vấn phương tiện CSS.

Để đảm bảo hiển thị và thu phóng khi chạm chính xác cho mọi thiết bị, hãy thêm thẻ meta chế độ xem phản hồi vào <head>phần tử của bạn:

<meta name="viewport" content="initial-scale=1, width=device-width" />

Sao chép

CssBaseline​

Material UI cung cấp một thành phần CssBaseline tùy chọn . Nó sửa một số điểm không nhất quán trên các trình duyệt và thiết bị trong khi cung cấp các thiết lập lại phù hợp hơn với Material UI so với các bảng định kiểu toàn cục thay thế như normalize.css .

Phông chữ mặc định​

Material UI sử dụng phông chữ Roboto theo mặc định. Xem Cài đặt—Phông chữ Roboto để biết thông tin chi tiết đầy đủ.

5:11:14 AM