Material-UI cũng cấp cho bạn khá đầy đủ các component để có thể tạo ra một trang web một cách nhanh chóng hơn, mà không phải đi ngồi css từng tí một.

Nội dung chính Show

3. Typography

Ta có thể tự custom Component của Material theo ý mình thích. Xem thêm tại đây.

Cài đặt Material UI

npm install @material-ui/core

CssBaseline

Material UI cung cấp một Component tùy chọn là CssBaseline. Giúp fix một số lỗi không nhất quán trong trình duyệt hoặc thiết bị khi đọc file HTML như là tự thêm margin, padding vào thẻ <body>,…

CssBaseline sẽ tự chỉnh reset margin, padding trong thẻ <body>, và thêm box-sizing: border-box vào trong thẻ <html>.

Ngoài ra còn một số css khác được thêm vào (tự tìm hiểu).

CssBaseline nên được thêm vào file gốc của project (App.js hoặc Index.js) để sử dụng toàn project.

Một số Component (Có sẵn) thường dùng trong Material UI

1. Grid

Grid trong Material UI chia bố cục layout thành 12 cột. Giúp dễ dàng chia bố cục và Responsive trang web. Nếu như bạn đã xài Bootstrap thì sẽ không còn xa lạ gì với bố cục 12 cột.

Cách Grid hoạt động:

Sử dụng CSS Flexbox (nếu chưa biết Flexbox có thể tự tìm hiểu). Ta có thể tự điều chỉnh direction, align-items hoặc justify-content theo ý mình.
Có 2 loại layout: containers và items (Containers sẽ bọc bên ngoài items).
Độ rộng (width) là phần trăm (%), vì vậy Grid sẽ luôn có kích thước tương ứng với width của phần tử cha.
Khoảng cách padding có thể điều chỉnh thông qua props spacing.
Có 5 loại grid theo loại màn hình: xs, sm, md, lg, and xl.

Ví dụ:

2. Icon

Icon trong Material được chuẩn hóa dưới dạng SVG. Sử dụng như Component trong ReactJS

Muốn sử dụng Icon, ta phải cài thư viện:

npm install @material-ui/icons

Sử dụng Icon, ta chỉ việc import Icon vào rồi sử dụng như 1 compnent. Xem danh sách tất cả các Icon tại đây

Ví dụ:

Bọc component <IconButton> ở ngoài để có thể click vào Icon (Gọi sự kiện,…)

3. Typography

Typography cho phép chúng ta thống nhất toàn bộ định dạng text trong trang web.

\=> toàn bộ định dạng text, màu, đều được dịnh nghĩa sẵn trong theme của material.

Ví dụ, nếu variant là h1, thì sẽ có font size, font-weight bao nhiêu, color= “primary” là có màu xanh, còn color=”textPrimary” là có màu đen, tất cả những cái này đều đinh nghĩa sẵn trong theme.

Một số props trong Typography:

Variant: đinh kiểu dạng text . Các giá trị bên trong variant. Mặc định không set sẽ là body1

2. color: màu text.

Các giá trị bên trong color. Mặc định không set sẽ là initial

3. component: tag html sẽ được render ra giao diện.

4. align: left/right/center/justify.

5. display: block/inline

6. className: Gắn class để ghi đè hoặc thêm thuộc tính css nếu muốn.

7. Xem thêm

Để hiểu xem các giá trị mặc định của từng variant h1, h2, h3… có font-size, font-weight là gì. Ta có thể xem các giá trị mặc định của từng theme tại ĐÂY.

4. Button

Gồm có 5 loại như hình dưới.

Code

Button có các props như là: variant, color, size, disabled…

color: Để chỉnh màu như ở trên.

2. variant: Xác định kiểu của button (Mặc định không khai báo sẽ là kiểu text)

text: Không có background-color + border
outlined: Không có background-color
contained: Có cả background-color +border

3. size:

small
medium
large

5. Card

Card là thành phần chứa các thông tin và hàn động của một chủ đề nào đó.

Material UI có nhiều loại card và nhiều tùy chỉnh khác nhau, mình sẽ chỉ đề cập tới Card mình hay sử dụng.

Xem thêm

Container

Card container chứa tất cả các thành phần bên trong Card.

2. Thumbnail [optional]

Hiển thị avatar, logo hoặc icon.

3. Header text [optional]

Tên của chủ đề,..

4. Subhead [optional]

Hiển thị thông tin thêm như tác giả, địa chỉ,…

5. Media [optional]

Có thể chứa hình ảnh,…

6. Supporting text [optional]

Một đoạn văn nhỏ để mô tả hoặc tóm tắt nội dung

7. Buttons [optional]

Thêm các action vào trong Card

8. Icons [optional]

Thêm các action vào Card thông qua các Icon (như like, lưu topic, share,…)

Ví dụ:

Khai báo các Components như Card, CardHeader, CardContet,.. khá giống với 8 thành phần đã nêu ở trên

Kết quả của đoạn code trên:

Ngoài ra, còn rất nhiều Component khác như Modal, Breadcumb, Input, Checkbox,… tùy vào nhu cầu sử dụng, có thể tìm hiểu thêm tại đây

Customize theme của Material UI

Trong trường hợp, ta không muốn sử dụng theme của material ui, mà muốn tự customize thì như thế nào ?

Ta có thể thay thế giá trị mặc định của Material UI như color, font-size, font-weight mặc định bằng cách sử dụng component`ThemeProvider` bao ngoài file gốc(App.js) để bọc toàn project.

Hàm createMuiTheme sẽ tạo theme cho bạn dựa trên cả theme mặc định và các tùy chọn của bạn. Ví dụ để đổi màu primary có sẵn từ blue (

3F51B5) sang green (rgba(41, 241, 195, 1)):

Lưu ý: Color trong Material chỉ nhận mã màu Hex (
000) hoặc mã màu Rgba(). Chứ không tên màu bằngtiếng anh (VD: primary: “black”)

palette là màu, typography là định dạng text. Ta có thể xem thêm tại ĐÂY

Ngoài ra còn có 2 thuộc tính là overrides và props giúp bạn sửa các giá trị mặc định trên các component có sẵn.

Khi vào tìm component trong mục API bạn, bạn sẽ thấy tên class css và các props của nó để thay đổi. Xem các props mặc định của Material Component tại ĐÂY