Advanced Material-UI Component Styling: The Complete Course

Focused View

Jonathan Middaugh

6:41:33

12 View

1 - Intro to Advanced MUI v5 Component Styling

1 - Introduction.mp4

03:40

2 - Architecting a MaterialUI App

2 - What We Will Build.mp4

01:34

2 - basic-mui-app.zip

2 - npm-install-commands.txt

2 - tsconfig.zip

3 - Scripts and File Organization.mp4

04:14

4 - MUI AppBar and Drawer Functionality.mp4

10:11

5 - MUI React Router.mp4

07:33

6 - MUI AppBar and Drawer Styling.mp4

21:24

3 - Deep Dive into MUI Forms

7 - What We Will Build.mp4

00:59

8 - Data and Types.mp4

06:53

9 - MUI TextField Autocomplete Select and DatePicker.mp4

22:11

10 - MUI Radios and Form Buttons.mp4

08:42

11 - Component Spacing in Forms.mp4

06:44

12 - Form Event Handlers.mp4

30:46

13 - Form Submit and Alert.mp4

10:11

14 - Exporting Custom Components.mp4

17:59

4 - MUI Grids Tables and Data Grids

15 - What we will build.mp4

00:48

16 - MUI Grids and Cards.mp4

22:12

17 - Tables.mp4

10:04

18 - MUI Data Grids.mp4

11:47

19 - Displaying Form Data.mp4

02:57

5 - Advanced MUI Styling Overview

20 - MUI Styling APIs and Philosophy.mp4

03:02

20 - beautiful-mui-app.zip

21 - SX vs Styled API vs Theme.mp4

10:19

22 - Understanding JSX the DOM and Compositional Components.mp4

07:54

6 - Advanced MUI TextField Autocomplete Select and DatePicker Styling and Use

23 - Advanced TextField Styling.mp4

13:01

24 - Advanced Autocomplete Styling.mp4

09:12

25 - Advanced Select Component Styling.mp4

12:26

26 - Advanced DatePicker Props and Styling.mp4

13:26

7 - Advanced SX Prop Syntax

27 - EVERY SX Prop Syntax Explained.mp4

10:08

8 - Advanced Styled API Syntax

28 - How to Create Styled Components.mp4

01:02

29 - Theme Props and Options in the Styled API.mp4

12:57

9 - Advanced Theme Styling

30 - Creating a MaterialUI Theme.mp4

06:10

31 - Customizing Theme Palette.mp4

06:19

32 - Creating Theme Overrides and Variants.mp4

08:46

33 - Customizing Theme Breakpoints.mp4

01:53

10 - Advanced MUI Form Use and Styling

34 - Advanced Form Components.mp4

03:57

11 - Advanced Layouts with MUI Stack and Box

35 - Vertical and Horizontal Layouts with the Stack Component.mp4

05:25

36 - Comparing the Stack and Box Components.mp4

02:17

12 - Collapsible Components in MUI

37 - Using the MUI Collapse Component.mp4

04:11

13 - Advanced MUI Grid Sizing Styling Spacing and Alignment

38 - Controlling Card Height Inside the Grid.mp4

05:21

39 - Grid Size Style and Alignment.mp4

07:48

40 - Grid Spacing.mp4

03:59

14 - Advanced MUI Table Use and Styling

41 - Customizing the Table Component.mp4

12:36

15 - Advanced Data Grid Use and Styling

42 - Using the Data Grid renderCell Prop.mp4

06:13

43 - Component Cells in the MUI Data Grid.mp4

02:30

44 - Advanced Data Grid Styling.mp4

06:13

45 - Data Grid Sort and Filter.mp4

05:55

16 - Adding Mobile Responsive to the MUI App

46 - Adding Breakpoints to the Drawer Component.mp4

02:03

47 - Mobile Responsive Hooks and State Values.mp4

06:32

48 - Showing and Hiding Components Based on Screen Size.mp4

04:54

49 - CSS Transitions in MUI.mp4

04:15

Description

Learn to style any MUI component: Dive deep into the DOM, understand MUI class rules, and ace the most difficult props

What You'll Learn?

Learn how to style ANY Material-UI component
Understand when to use sx, styled API, or theme
Explore how MUI components render as DOM elements
Create advanced nested selectors using the default classes that render with MUI components
Control the width and height of rows, cells, columns, and child components in the MUI Table, Data Grid, Grid, and more
Customize the spacing (padding AND margin) for every component, especially the Grid, Stack, and Box
Design perfect alignment with flex and flex properties
Deeply understand every MUI form component, plus the Grid, Table, and Data Grid
Build a Material-UI app from scratch

Who is this for?

React developers who have struggled to style a Material-UI component

React developers who have struggled to understand MUI layouts, especially flex/justify content/align items

React developers who want to deeply understand how MUI components render as DOM elements

React developers who want to learn to build an MUI project from scratch and gain expertise in forms, tables, grids, and data grids

What You Need to Know?

Beginner level knowledge of React

Windows or Mac computer

More details

Description
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!
Who this course is for:
React developers who have struggled to style a Material-UI component
React developers who have struggled to understand MUI layouts, especially flex/justify content/align items
React developers who want to deeply understand how MUI components render as DOM elements
React developers who want to learn to build an MUI project from scratch and gain expertise in forms, tables, grids, and data grids

User Reviews

Rating

average 0

Total votes0

Focused display

I have ten years of professional software development experience in US companies, plus two years of JS blogging and YouTubing. I love to deeply explore JavaScript libraries and gain deep expertise on styling component libraries.I also have a passion for education, and have taught coding bootcamps and at the community college level. Udemy is the perfect platform for software passion and knowledge to be shared.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.