Full Responsive Design in MUI 5 (Material UI) Course - React Next.js 13

Описание

There are many ways that we can make our design responsive in material ui based on different breakpoints, in this video you will learn all the ways that you can make your material ui mui project responsive based on breakpoints in a nextjs react or any react project.

#react #nextjs #mui #responsive

? Related Videos:

https://www.youtube.com/watch?v=_SQZbgTLCMg

? Links:

Project Github Repo: https://github.com/amirnz026/mui-responsive-tutorial

Nextjs 13 App Router Mui Setup: https://mui.com/material-ui/guides/next-js-app-router

? Chapters:

00:00 Results Showcase
00:20 Setup
02:45 Create Theme
04:38 Add or Remove Breakpoints
07:00 1. Make Responsive in Global Theme
10:41 2. Make a Specific Component Responsive
11:51 3. More Control Over Specific Button Responsive
13:30 4. useMediaQuery

? My Editor Settings:

- JetBrains Mono
- Monokai Pro

? Topics Covered:

- How to make a material ui (MUI) next.js 13 react 18 project reponsive based on different breakpoints?
- How to use media query (useMediaQuery) in material ui mui react?
- How to use material ui mui in nextjs 13 app router project?
- How to add different breakpoints to material ui?
- Change material ui default breakpoints
- Nextjs 13 app router material ui mui setup

? Resources:

https://mui.com/