Material UI Crash Course: Intro to React + Material UI V5 (2022 Edition)

Просмотров 97 тыс.

% 2 215

Welcome to this crash course of Material UI V5!
MUI V5 is a great frontend ui library to integrate with your React project. It comes with so many benefits, and so many customizable options! In this video, we'll go over what MUI is, why you should use MUI with ReactJS, how to import simple Material UI components, and how to customize your own themes and style your components :)
If you're looking for a specific component in depth, check out the MUI V5 playlist: ru-vid.com/group/PLQg6GaokU5CyVrmVsYa9R3g1z2Tsmfpm-
Follow me on Social Media:
SistilliAnthony
www.tiktok.com/@anthonysistilli
Join our coding Discord:
discord.gg/CRT4zpx
-LINKS-
CodeSandbox code link: codesandbox.io/s/theming-in1wpc
MUI V5 Playlist: ru-vid.com/group/PLQg6GaokU5CyVrmVsYa9R3g1z2Tsmfpm-
Material Design: material.io/design/typography/the-type-system.html#type-scale
Material UI Getting Started Guide: mui.com/getting-started/installation/
Button example: mui.com/material-ui/react-button/
Typography Example: mui.com/material-ui/react-typography/
MUI V5 System properties: mui.com/system/properties/
MUI V5 SX Prop: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-hHMkuXjRZHY.html
MUI V5 Theming: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-SUEkAOuQZTQ.html
-TIMESTAMPS-
0:00 Intro
1:15 What Material UI is (and how it relates to Material Design)
2:30 Installing @mui/material + emotion/react + emotion/styled
3:25 Importing our first MUI Component: The Button
4:55 Component props in MUI and component customization
5:30 How to read MUI Documentation for components (Demos / Examples, and API)
6:25 The 3 common Props of MUI Components
7:35 Typography (text) examples
10:45 What Themes are and how to customize a Theme in MUI V5
14:45 Creating a theme and overwriting colors
17:35 Customizing Typography with Themes (Creating a typography Variant)
20:40 Introduction to the SX prop in MUI V5 (for adding css to your component) and system shorthands
24:55 Custom colors using your Theme
27:00 How to use Styled Components to add CSS and style your components

Опубликовано:

4 май 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 131

@krailamohammedislam6822 Год назад

this is the best mui playlist in 2022 i have watched, and believe me i saw a lot , the explantion is great it even helped me understand the mui docs even better, thanks for the amazing work.

@mchirag82 Год назад

This is the best explanation of MUI I've found. The focus on teaching concepts and how to align your mental model with MUI to get the most out of it makes it stand out.

@ryanander31 Год назад

Thank you! This was awesome. You've done a great job of pulling lots of content together and making them easily digestible.

@Conorstew Год назад

This guy is legit. He is sharing knowledge from experience while all the other youtube vids ive watched on material ui were basically just reading straight from the docs.

@Swexican74 Год назад

You rock Anthony. My company is just starting to use MUI and you were the first to pop up on a search and probably the best, Thanks and keep sharing that big brain of yours with us.

@yaojiang2283 Год назад

I am only 13 minutes in and I can already tell this is quality material. Thank you so much Anthony!

@jazymhmd1944 Год назад

I have taken so many courses. Never seen such an amazing explanation. This is an amazing talent!

@David-bl1xr Год назад

I agree with Chirag, this is great. Thank you for the crash coarse as well as the detailed videos. This is going to be super helpful with my upcoming react projects.

@ilyukchiljin7640 Год назад

hands down the best MUI V5 tutorial series I found on youtube. Good job!!

@BOSprodz Год назад

I've struggled with this library on my own so much and you have explained it so beautifully thank you

@eduardojls Год назад

I was wondering why I didn't see this tutorial before? It's exactly what I was looking for, someone that explain how to implement MUI with React. Thanks a lot for sharing this amazing tutorial. Can't wait to see the rest of the playlist 🙌🏻🙌🏻

@anthonynarine5292 Год назад

this guy! i bought an outdated course to learn this on udemy and Ant just hit it out the park with this course. hats off to you bud. thanks you

@marcellawonderweapon4008 Год назад

Best introduction ever! Thank you very much for providing this!

@JulianHernandez-zw4ob Год назад

The absolute best tutorial on MUI. Thank you sir

@briandacallos4234 Год назад

Can't find other free video about material ui that is so good like this, damn man you nailed it. Subs!

@ahemenjehoshaphat452 3 месяца назад

Thank you! You did this piece with so much love ❤

@femiaros7811 11 месяцев назад

God bless you Anthony 🙏🏼, been searching of a good/clean explanation of how MUI customization works now. After sometime searching, found this. This is super helpful💯 man. Good work

@ajoykrdas Год назад

Great tutorial!! And the teaching style has really created more curiosity towards exploring MUI.

@agentbabs_yt Год назад

Excellent video and thank you for all of your hard work and sharing your knowledge. I will be watching your whole series and you definitely have a new subscriber!

@RockmanExecute Год назад

Thank you, super useful and straight to the point with perfect pacing!

@KennyomarGarcia Год назад

Awesome crash course on MUI. Thanks so much!

@raviss98 6 месяцев назад

Anthony, this is gold content. Thanks for the super helpful video.

@dwayne6402 Год назад

I will be going through all those material ui component videos. Looking forward to learning Material UI more in depth from you.

@shubhamshrivastava2461 Год назад

Hey Anthony, I would like to appreciate your efforts on giving brief overview on Material UI. Love your way of Teaching!

@parsaeagle Год назад

Honestly this video deserves much more views

@dror-krief Год назад

Thank you man this is an invincible guide you really helped me I appreciate your work here

@srlyicfnotificationnews5110 Год назад

Thanks for the motivation. I wasn't sure if I could do it, but I might try it eventually.

@jwithington Год назад

This explains so much, so well! Thank you!🎉🎉🎉

@marsh1941 Год назад

This was exactly what I needed! 😍

@isaacreyes4915 Год назад

Just started trying to learn Material and I am glad the website linked to you. I tried watching the others but they don't really explain things. They just start coding away and build stuff.

@VladyslavHladchenko 2 года назад

Thank you for a nice explanation. I'm not a web developer but making an app for myself. Your videos really help :D

@DominikZalewski85 Год назад

I need to write a simple UI for my fastapi based CRUD API and this video helped me a lot. Thanks!

@rahulranjan8173 11 месяцев назад

Thanks Anthony. You made life simple

@frankcamberos8417 Год назад

Glad I found you as I begin learning React/MUI! 👍

@simpleciscovoicetutorials79 Год назад

Such a great job explaining the them object! Thank you!

@miladg5999 Год назад

Excellent and concise crash course thanks!

@chuckleezy 2 года назад

This is mad helpful, thank you so much!

@WandersonDavid_KariJobeBrasil Год назад

You helped me a lot. Huge thanks!

@mohamedinfas5341 2 года назад

Thank you so much. Well detailed. Very helpful ❤️

@joe44850 Год назад

For those using typescript, you'll find you can't just simply add "myVariant" without the red squigglies. You'll need something like this before your theme code: declare module "@mui/material/styles" { interface TypographyVariants { myVariant: React.CSSProperties; } interface TypographyVariantsOptions { myVariant?: React.CSSProperties; } } declare module "@mui/material/Typography" { interface TypographyPropsVariantOverrides { myVariant: true; } }

@alfredmadere9030 Год назад

That is hella annoying

@joe44850 Год назад

@@alfredmadere9030 Indeed

@thesingularity3566 Год назад

Do you know how to do the same with palette?

@MichaelShingo 10 месяцев назад

Thank you, was searching for this

@opaskyjurca3887 Год назад

Really useful tutorial, thank you!

@nawzhinit2744 Год назад

Great video Anthony Thanks !

@shejaemeric8511 Год назад

Great explanation and examples. Thank you

@lappham97 2 года назад

Thank you so much for your effort!!!! Very well explained.

@XxKosTaSxXx Год назад

Watched the whole yt to find the answers this 30 min video gave. Thanks

@user-qm2vi7nf2x Год назад

Much appreciation.

@reedschrichte800 Год назад

Great video, thank you!

@caseyspaulding 9 месяцев назад

Thanks! Quality training right here

@Satishkumar-rx7oy Год назад

quality video..thanks for making this

@liorjjj 2 года назад

Anthony I love You!! thanks for this

@alexandergeorgesquire220 3 месяца назад

Very informed individual! Thanks

@khinnyeinchan8351 2 года назад

Nice explaining. It is Very Helpful. Thanks

@metehandemirguc2567 Год назад

Frrrrr tNice tutorials man just straight forward !

@balajisundaram Год назад

great work !!

@ahsanulkabir8640 Год назад

Its best indeed. Thanks

@JR-lo2ei 2 года назад

Nice tour.

@muhammadhabibahmadbscs-m2404 Год назад

Don’t be afraid, just embrace it.

@mohammedammarkurabi7520 Год назад

Thank you so much for your great effort. I learned a lot.

@commentator2407 Год назад

Did u use react 18?

@commentator2407 Год назад

Is it working well?

@kim92se64 Год назад

what a great tutorial !!!

@ottercoder9321 Год назад

Awsome video!

@teewhy3828 Год назад

great crash course!

@SalsaColombiaUS Год назад

Thank you for this very profesional tutorial I hope you receive blessings :)

@hungphungthanh8978 Год назад

Thanks A Lot Dude

@danialarif9443 Год назад

Awesome video

@nehat786 2 года назад

Sir when a project with MUI 5. Your videos are very informative but it would be great if you bundle all those components and make a decent project-based approach to teaching. In that way, we can grab it easily. And it boosts our confidence to work on the next project as our own. Thank you!

@AnthonySistilli 2 года назад

That's a great idea! Thank you Nehat!

@profidev_js Год назад

you are a god!

@thezgold Год назад

thanks 🍊🍊🍊

@healthinsurance59 2 года назад

Sir please continue react part you easily explain the concept you have not explained is useContext just subscribed waiting for it.....

@adithyakiransekar Год назад

Excellent video. Usually I wrap my components to extend the base MUI library, so I will have control over props passed and styling, but it seems that is not needed, and we can achieve all this using theme? Or is it still best practice to wrap MUI components to create our version of say MUI-Button etc? Thanks!