Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

Advanced Material-UI Component Styling: The Complete Course

Khóa Học Toàn Diện: Nâng Cao Kỹ Năng Tùy Chỉnh Giao Diện Cho Component Material-UI

Khóa Học Toàn Diện: Nâng Cao Kỹ Năng Tùy Chỉnh Giao Diện Cho Component Material-UI

Học cách tùy chỉnh giao diện cho MỌI component MUI: Tìm hiểu sâu về DOM, nắm vững các quy tắc class của MUI và thành thạo các props phức tạp nhất

4.4
(407 đánh giá)
3,328 học viên
Giảng viên
Jonathan Middaugh
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
6.5 giờ video
49 bài giảng
1 bài quiz
1 bài coding
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026

Bạn sẽ học được gì

Học cách tùy chỉnh giao diện cho BẤT KỲ component Material-UI nào
Hiểu khi nào nên dùng sx, styled API hay theme
Khám phá cách các component MUI được render thành các phần tử DOM
Tạo các bộ chọn (selector) lồng nhau nâng cao bằng cách sử dụng các class mặc định được render cùng với component MUI
Kiểm soát chiều rộng và chiều cao của hàng, ô, cột và component con trong MUI Table, Data Grid, Grid và hơn thế nữa
Tùy chỉnh khoảng cách (padding VÀ margin) cho mọi component, đặc biệt là Grid, Stack và Box
Thiết kế căn chỉnh hoàn hảo với các thuộc tính flex
Hiểu sâu về mọi component form MUI, cùng với Grid, Table và Data Grid
Xây dựng một ứng dụng Material-UI từ đầu

Yêu cầu

Kiến thức React cơ bản
Máy tính chạy Windows hoặc Mac

Đối tượng phù hợp

Dành cho lập trình viên React từng gặp khó khăn khi tùy chỉnh giao diện cho component Material-UI
Dành cho lập trình viên React từng gặp khó khăn trong việc hiểu bố cục MUI, đặc biệt là flex/justify content/align items
Dành cho lập trình viên React muốn hiểu sâu cách các component MUI được render thành phần tử DOM
Dành cho lập trình viên React muốn học cách xây dựng một dự án MUI từ đầu và thành thạo về forms, tables, grids và data grids

Nội dung khóa học

16 phần • 49 bài giảng
1 Giới thiệu
1 Những gì chúng ta sẽ xây dựng
2 Scripts và Cách tổ chức File
3 Chức năng của MUI AppBar và Drawer
4 Kết hợp MUI + React Router
5 Tùy chỉnh giao diện cho MUI AppBar và Drawer
1 Những gì chúng ta sẽ xây dựng
2 Dữ liệu và Kiểu dữ liệu (Types)
3 MUI TextField, Autocomplete, Select và DatePicker
4 MUI Radios và Form Buttons
5 Khoảng cách giữa các Component trong Form
6 Xử lý sự kiện Form (Form Event Handlers)
7 Gửi Form và Hiển thị Thông báo (Alert)
8 Xuất (Export) các Component tùy chỉnh
1 Những gì chúng ta sẽ xây dựng
2 MUI Grids và Cards
3 Tables
4 MUI Data Grids
5 Tổng hợp và Kết nối tất cả
1 Triết lý và Các API tùy chỉnh giao diện của MUI
2 So sánh SX, Styled API và Theme
3 Hiểu về JSX, DOM và Component có cấu trúc lồng nhau (Compositional Components)
1 Tùy chỉnh Giao diện Nâng cao cho TextField
2 Tùy chỉnh Giao diện Nâng cao cho Autocomplete
3 Tùy chỉnh Giao diện Nâng cao cho Component Select
4 Props và Tùy chỉnh Giao diện Nâng cao cho DatePicker
1 Giải thích MỌI Cú pháp Prop SX
1 Cách tạo Styled Components
2 Theme, Props và Options trong Styled API
1 Tạo một Material-UI Theme
2 Tùy chỉnh Bảng màu (Palette) của Theme
3 Tạo Theme Overrides và Variants
4 Tùy chỉnh Breakpoints của Theme
1 Các Component Form Nâng cao
1 Bố cục Dọc và Ngang với Component Stack
2 So sánh Component Stack và Box
1 Sử dụng Component Collapse của MUI
1 Kiểm soát Chiều cao Card bên trong Grid
2 Kích thước, Giao diện và Căn chỉnh Grid
3 Khoảng cách Grid (Grid Spacing)
1 Tùy chỉnh Component Table
1 Sử dụng Prop renderCell của Data Grid
2 Component Cells trong MUI Data Grid
3 Tùy chỉnh Giao diện Nâng cao cho Data Grid
4 Sắp xếp và Lọc trong Data Grid
1 Thêm Breakpoints vào Components
2 Hooks và State Values cho Đáp ứng Di động
3 Hiển thị và Ẩn Components dựa trên Kích thước Màn hình
4 CSS Transitions trong MUI

Giới thiệu khóa học

Welcome to Advanced Material-UI Component Styling: The Complete Course.


This course will give you expertise in styling MUI version 5 components.  You will learn to ace some of the most difficult components, such as the Data Grid, Autocomplete, and Date Picker.


Together we will explore the DOM and discover the default class system MUI uses and how to use these classes to create advanced nested selectors.  Critically, we will also learn the best use cases for the sx prop, the styled API, and the theme.


Here is a peek at some of the MUI knowledge and syntax expertise this course covers:

  • Using theme in the styled API

  • Using options in the styled API

  • Passing props to the styled API

  • SX breakpoints

  • SX hover

  • SX theme

  • SX nested selectors

  • Custom theme palette colors

  • Theme component overrides

  • Custom theme variants

  • Using nested selectors on the TextField to change border, hover, and focus style

  • Autocomplete getOptionLabel, renderInput, and renderOption

  • Select component styling, mult select, and custom option rendering

  • DatePicker renderInput, inputProps, popperProps

  • EVERY form subcomponent explained

  • Mobile Responsive in MUI - transitions, media queries, and more

  • One-dimensional layouts with the Stack component

  • Two-dimensional layouts with Grid

  • Everything flex - direction, justify content, align items, and more

  • Data Grid columns, components, and toolbar options

  • Styling the Data Grid with nested selectors

  • Custom MUI Tables

  • Using React hooks in an MUI project


You will have lifetime access to all course content, plus access to an active Q/A group.

This course comes with a 30-day money back guarantee by Udemy.


So take this course and never again fear any MUI component!

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Frontend Development
Hiển thị tất cả khoá học Javascript
Hiển thị tất cả khoá học React
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊