Material UI Crash Course: Intro to React + Material UI V5 (2022 Edition)
HTML-код
- Опубликовано: 3 июн 2024
- 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: • MUI V5 - Updated Mater...
Follow me on Social Media:
/ sistillianthony
/ anthonysistilli
Join our coding Discord:
/ discord
LINKS
CodeSandbox code link: codesandbox.io/s/theming-in1wpc
MUI V5 Playlist: • MUI V5 - Updated Mater...
Material Design: material.io/design/typography...
Material UI Getting Started Guide: mui.com/getting-started/insta...
Button example: mui.com/material-ui/react-but...
Typography Example: mui.com/material-ui/react-typ...
MUI V5 System properties: mui.com/system/properties/
MUI V5 SX Prop: • MUI V5: The SX Prop
MUI V5 Theming: • MUI V5: Themes (custom...
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
Thank you! This was awesome. You've done a great job of pulling lots of content together and making them easily digestible.
I have taken so many courses. Never seen such an amazing explanation. This is an amazing talent!
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.
hands down the best MUI V5 tutorial series I found on youtube. Good job!!
I've struggled with this library on my own so much and you have explained it so beautifully thank you
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 🙌🏻🙌🏻
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.
I am only 13 minutes in and I can already tell this is quality material. Thank you so much Anthony!
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.
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.
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!
Thank you! You did this piece with so much love ❤
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.
Great tutorial!! And the teaching style has really created more curiosity towards exploring MUI.
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
Can't find other free video about material ui that is so good like this, damn man you nailed it. Subs!
Best introduction ever! Thank you very much for providing this!
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
The absolute best tutorial on MUI. Thank you sir
Awesome crash course on MUI. Thanks so much!
Hey Anthony, I would like to appreciate your efforts on giving brief overview on Material UI. Love your way of Teaching!
Anthony, this is gold content. Thanks for the super helpful video.
I will be going through all those material ui component videos. Looking forward to learning Material UI more in depth from you.
Thank you man
this is an invincible guide
you really helped me
I appreciate your work here
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.
Thank you, super useful and straight to the point with perfect pacing!
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;
}
}
That is hella annoying
@@alfredmadere9030 Indeed
Do you know how to do the same with palette?
Thank you, was searching for this
Thanks for the motivation. I wasn't sure if I could do it, but I might try it eventually.
Such a great job explaining the them object! Thank you!
Excellent and concise crash course thanks!
Thank you for a nice explanation. I'm not a web developer but making an app for myself. Your videos really help :D
This explains so much, so well! Thank you!🎉🎉🎉
Glad I found you as I begin learning React/MUI! 👍
Honestly this video deserves much more views
This was exactly what I needed! 😍
Thanks Anthony. You made life simple
You helped me a lot. Huge thanks!
Really useful tutorial, thank you!
Thank you so much. Well detailed. Very helpful ❤️
I need to write a simple UI for my fastapi based CRUD API and this video helped me a lot. Thanks!
Great video Anthony Thanks !
Thank you so much for your effort!!!! Very well explained.
Great explanation and examples. Thank you
This is mad helpful, thank you so much!
Nice explaining. It is Very Helpful. Thanks
Anthony I love You!! thanks for this
Very informed individual! Thanks
quality video..thanks for making this
Thanks! Quality training right here
Great video, thank you!
Frrrrr tNice tutorials man just straight forward !
Watched the whole yt to find the answers this 30 min video gave.
Thanks
Much appreciation.
great work !!
Nice tour.
great crash course!
Thank you for this very profesional tutorial I hope you receive blessings :)
Thank you so much for your great effort. I learned a lot.
Did u use react 18?
Is it working well?
Awsome video!
Its best indeed. Thanks
Pengunjung baru bang.. semangat buat konten..
what a great tutorial !!!
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!
That's a great idea! Thank you Nehat!
Sir please continue react part you easily explain the concept you have not explained is useContext just subscribed waiting for it.....
Awesome video
Don’t be afraid, just embrace it.
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!
Thanks A Lot Dude
nice explaination
Hi Anthony
It's really great tutorial. Can you please make project based tutorial like designing dashboard from mui5??
Thanks you for the video! Which color scheme are you using?
Really good explanation, thanks for that 😊
do you have a MERN created project using MUI5?
Bro thx really
thanks 🍊🍊🍊
you are a god!
Good explanation
Thanks and welcome!
Your video is great! Thank you! Could I consult you if I can use Tailwind CSS for the MUI 5?
This is great! BTW I think that your video might be lagging one or two frames behind your audio...
Nice video
Drag the volu for the setuper track that you're recording into all the way down.
I see you are a man of culture as well
Great!
because its hard doesn't make it impossible! Stay safe!
love from India🇮🇳🇮🇳
What font family are you using for your VS Code mate?
Just To Let You Know Anthony, I am from Pakistan.... Just Subscribed
Great
How to use callout? I can see them used in docs. but I cannot find this component
Rather than using JS, can you use TS for future videos?
Is mui better than chakra? I'm new to react and don't know what to use.
Hello sir,is it okay to forstly devolope full frontend with react and after create backend with laravl
Can you do a Mantine UI tutorial?
👌🏻
Thank you, but I'm pretty sure you can make coffee nervous :D
Yes bro, i know 😅
track, but the problem is I don't know how to do tNice tutorials, it only goes to the setuper as the whole track...can you help with tNice tutorials?
co lol. Thanks for the aweso tutorial!
How can we add custom colors to ThemeOptions at TypeScript
Good Tutorial. Only issue is your voice is inaudible when using laptop speakers.
great tutorial, i just hope you took a break after this. you looked exhausted!