Great video, brother. Helped me out a lot. I've been tasked with restyling nearly all components to suit the client's needs and it's good to see someone providing concise information.
I'm a UX/UI designer creating a design system that is translated into MUI right now. Your video was very helpful for understanding what themes are about! Thanx a lot! The dynamic cropping around your head made me a bit nervous though :D
Your presentation is very clear and effective. I've been struggling with toggling light and dark mode but you just solve my problem. Thank you so much. Please make more videos
Great video, fantastic info. Please, Sir, take a breath sometimes when speaking so we can keep up with you..sometimes it goes a little too fast and your words get lost in your breathing in. But great videos with well presented thorough explanations. Thanks
how does the dark mode work? does it change primary, secondary, etc colors automatically or I should also supply it with another theme properties for the dark mode?
Hello Friend! - Thanks for this tutorials, I'm learning from zero! and I have a question... Why in 21:18 when you used SX-PROP to chance margin, only aplies to left margin, what about top and bottom margin? I noted that if I removed the custom variant it works ok for all margin sides. It is missing some configuration in the custom variant?? Regards....
Hey mate, Love the videos. I would really like to know how to get CSS variables, output from a design system file into my theme. Can it be done?! I heard something about MUI CSSVars… Thanks again for the content. I am hooked.
One thing that I don't understand...what if I don't want to customize a theme? What if I just want to use it out of the box? I saw some videos of the v4 where people used the "makeStyles((theme))" and then imported something like..."theme.palette. background.dark". Without having to create a new theme and importing a ThemeProvider, is there a way to do the same thing in the v5?
It largely depends on who's creating the Figma designs! A lot of times, if the UX designer knows you'll be using MUI, they can download the MUI Figma components and build the UI with it. Then it's just a matter of creating the components correctly, and adding any additional stylings using the SX prop, makeStyles, or styled components, depending on what your preferred way of styling is :)
I just followed your video about dark mode. I want to ask, I created a custom palette with a new name and when I changed it to dark mode the color didn't change according to the mode. how do i fix it? Thank you sir
I dont get it, you are using here createTheme but i have seen some using also makeStyles, could you make video explaining differences, createTheme vs makeStyles vs useStyles vs createStyles vs withStyles … which one to use
createTheme creates the global theme for your entire react app + mui components. Example: make the default color of all text and buttons green. makeStyles / useStyles (the same thing essentially) is for styling individual components further. Example: style one specific button orange, and give it some extra width. :)
Dude, I have never seen videos from you before, the way you explain things is so clear!! Thank you very much!! Congrats!!!
Great video, brother. Helped me out a lot. I've been tasked with restyling nearly all components to suit the client's needs and it's good to see someone providing concise information.
I'm a UX/UI designer creating a design system that is translated into MUI right now. Your video was very helpful for understanding what themes are about! Thanx a lot! The dynamic cropping around your head made me a bit nervous though :D
Wow, what a fantastic video / tutorial. I love the chill vibe the whole thing has going on. Thank you!
Been looking for this kinda video for quite sometime now. Absolutely amazing 🔥
Thanks for taking the time to make this. Helps a lot in understanding official MUI documentation.
This was great! Love how you explained things - thank you!
Your presentation is very clear and effective. I've been struggling with toggling light and dark mode but you just solve my problem. Thank you so much. Please make more videos
Than you Mr. Sistilli. Your tutorial is exactly what I need.
Thanks for taking the time to explain it eloquently
Thanks !! Awesome video. You are explaining so clear.
We are eagerly awaiting your lesson on the use of Next/Image and Next/Link components with MUI.
Awesome video 🙂 you are explaining the key concepts of MU that is very helpful for the beginners
Perfect! Thanks mate!
your courses are amzing bro
Very well balanced and clear explanation. Thanks for creating this guide!
Awesome! How about making a nice full-blown Mui 5 project that we can code alongside to actually get a hands-on exp ... thanx in advance!
Thanks for sharing material ui creator
Wow, Amazing
We Needed Storybook Course, please
with that Krusty Krab background you have my sub and a like
Thank you for the value you add to us.
Glad it helped!!
Great video, fantastic info. Please, Sir, take a breath sometimes when speaking so we can keep up with you..sometimes it goes a little too fast and your words get lost in your breathing in. But great videos with well presented thorough explanations. Thanks
Amazing Video Man!
Brilliant!
very helpful, saved me a lot of time looking for plug and play.. awesome video.. keep up!!
thanks a lot. like the way you explain things
Good explanation
Thanks really helpful info and nicely presented 👌
Such wonderful info! Just one thing's missing. How to import MUI theme into your own components to add / use your own properties inside it
I think you can create the theme in a separate file and export it and then you can import it where ever you want and modify it.
Thank you for this video!!
your a hero
saving my butt every single day 🙌
Thanks, Nice video
Good stuff. Thanks.
Thanks great video just one thing missing that I'm looking for, how to use custom fonts and not Google fonts or CDN links...
If You found that: pl share the link
cant wait for the 'theme creator' video
:D
Thank you a lot!
Great stuff thanks
great video. Love from Bangladesh.
😍😍😍😍😍😍😍😍😍
thank you, your video helped me.
great stuff
how does the dark mode work? does it change primary, secondary, etc colors automatically or I should also supply it with another theme properties for the dark mode?
Thanks a lot.
Where Did you explained FontFamily?🤔
😍
thank you a lot
Hello Friend! - Thanks for this tutorials, I'm learning from zero! and I have a question...
Why in 21:18 when you used SX-PROP to chance margin, only aplies to left margin, what about top and bottom margin?
I noted that if I removed the custom variant it works ok for all margin sides. It is missing some configuration in the custom variant??
Regards....
Hey mate, Love the videos. I would really like to know how to get CSS variables, output from a design system file into my theme. Can it be done?! I heard something about MUI CSSVars…
Thanks again for the content. I am hooked.
One thing that I don't understand...what if I don't want to customize a theme? What if I just want to use it out of the box? I saw some videos of the v4 where people used the "makeStyles((theme))" and then imported something like..."theme.palette. background.dark". Without having to create a new theme and importing a ThemeProvider, is there a way to do the same thing in the v5?
would recommend using MUI for Figma design conversion or is it easier to use styling methods such as style components ?
It largely depends on who's creating the Figma designs! A lot of times, if the UX designer knows you'll be using MUI, they can download the MUI Figma components and build the UI with it. Then it's just a matter of creating the components correctly, and adding any additional stylings using the SX prop, makeStyles, or styled components, depending on what your preferred way of styling is :)
Can you add a custom mode? E.g Grayscale mode?
stuff like that 😄
I just followed your video about dark mode. I want to ask, I created a custom palette with a new name and when I changed it to dark mode the color didn't change according to the mode. how do i fix it?
Thank you sir
Can you make a video on how to style MUI components?
Good thing. Only bad thing was the code sandbox being slowww. try to use vscode next time
Can you tell how to style a MUI Dialog Component in React Class Component ?
Hey Anthony can you please showcase us the project or provide the project link that you built for your client with custom theme
I dont get it, you are using here createTheme but i have seen some using also makeStyles, could you make video explaining differences, createTheme vs makeStyles vs useStyles vs createStyles vs withStyles … which one to use
createTheme creates the global theme for your entire react app + mui components. Example: make the default color of all text and buttons green.
makeStyles / useStyles (the same thing essentially) is for styling individual components further. Example: style one specific button orange, and give it some extra width. :)
@@AnthonySistilli does mui v5 have makeStyles ?
can you give short notes pdf of all thies?
this doesn't work in typescript. i mean the creating custom colors bit
ngl i searched mui theme (mastered ultra instinct)
everything was fine but your talking speed is like light..too fast
could you plz used practical examples in you explanations, like use real code rather then explaining with words
Too annoying to see that green screen video edit
Nice coding but learn editing as well 😂
Thank you!