Material UI recently updated to MUI5 and it is full of great stuff. But themeing has changed. If you want to know how to customize your React and Material UI app and customize all of its components correctly, this is how you do it!
MUI is just so overwhelming, especially if you're also somewhat new to ReactJS. This tutorial might just be what I needed to clear some doubts I had. Thank you so much.
For me, the best part of this video started around the 50 minute mark, showing how to narrow down the exact set of components for which to customize theme properties. First time I understood some of that material. Thank you very much!
I like to watch different videos when learning something new. Your video provided a different perspective and keep my attention the whole time. Thanx for a great video!!
What a good explanation, man! Keep discover more complicated thing about MUI v5. It's lovely to watch videos like this. Looking forward to more videos!!!
Starting from 55:00 your tutorial, all your examples and explanations, are pure gold. I tried so many things before, all failed in doing theming right. Now, with your bright torch of knowledge and understanding in my hands, I realize how blindly I was walking in the dark ;-) All my former problems with theming literally disappeared - and things are working just fine. Thanks man!
@@codingNerd Thanks! Javascript is not the easiest to learn, but with a few months training it's improving. Perfect video you made here, I use it as a reference for the UI parts of my projects. (Hopefully I'll remember most of it soon.)
Really nice video. His every word is valuable. He explained how and why!!!! If someone wants to learn Material UI, this video is highly recommended. Thanks!!!!!! :)
bro ur channel is gold. these vids are severely undervalued interms of view count. This video seems to being doing well and i hope it brings more people to your other content
Thanks for a good video. Helped me verify that the style system was indeed implemented correctly in my latest work project. Someone had done something weird and mixed bootstrap into MUI button style.
Can’t say it’s necessarily wrong. But definitely unnecessary. Material should be enough. Specially since material 5 is huge. But I could see them both in one ecosystem if the dev is doing a retrofit for example.
Super tutorial. It's videos like this that make me love the internet. At one time this info would've been locked in crazy big books and over priced training sessions
Luis, this is fantastic. I really appreciate your slow, concise, sequential, instruction. You are a great teacher and I think this channel will have great long term success if you keep up these instructional videos coming. I am a self taught dev and am trying to learn as much as I can this year before getting my resume/applications out next year. I spent a good amount of time trying to figure out how to customize the navbar/appbar but only ran into frustration until I found this. I had no idea you had to create a theme component. Great video, you earned a sub a like. I will be recommending your channel to anyone who asks for help from here on out. Best of luck to you and thanks again!
I assume the "weird" "&" is "the parent selector" from Sass 1:08:13. Luis this is the first video I watched on your channel: totally loved your humble style without any cuts or arrangement. In different parts of the video, we can see you struggle to find some pages in documentation or do some typos or mistakes and just solve them on stage which makes the whole video more educational. Great content keep going I will be following you with great pleasure! Cheers! (P.S. I know you are humble but better add tags to your videos, like its hard to get this video discovered while searching with "MUI" involved keyword etc., you deserve much more views)
Thank you so much for your kind words. I'm not very good at this RU-vid thing.I just enjoy making them and teaching. I do love doing my own debugging on stage as you mentioned. It shows the reality of this job. Many other educators flow through code way too easily. Or so it seems. I understand it cuts time from the video but I want my viewers to know that if they get stuck or lost or made a typo or something like that, that it is completely normal. Thanks again for the tip. I will be integrating tags right away. Thanks
At 25:40 you mention "4 measures of whatever that is". It's a theme property specified in "spacing" property as "8px" by default. This can be changed by using the useTheme() or createTheme() hooks and injecting the theme with a ThemeProvider component.
It can be. The concept of a component is that it can be self-sustained (unless you have dependency props). However it isn't recommended unless you are sure you will not add it anywhere else. It's better to have it at the highest level and be ready to be accessed whenever you need it
Nice authentic tutorial. But based on my experience with MUI 5, mixing legacy packages such as @mui/styles and @mui/icons-material with @emotion/styled could result in code conflicts. So beware of that. The recommended way to implement styles with MUI now is through the sx prop and styled-components.
That’s an excellent feedback. I started styling using the sx prop prinarily but ran into repetitive code within the same component. I felt that centralizing the styles in one shareable class through a mui/styles approach would help me distribute the props and reusing as needed. But I do agree that I ran into some styling conflicts. Overriding the component props was the most effective way to combat that problem.
Hi, I have been trying to solve this issue a lot but cannot find solution. I'm receiving this error after compiling the below code- TypeError: Cannot read properties of undefined (reading 'background') import { makeStyles } from '@mui/styles'; const useStyles = makeStyles((theme) => ({ paper: { position: 'absolute', width: 400, backgroundColor: theme.palette.background.paper, //... are showing under pall border: '2px solid #000', boxShadow: theme.shadows[5], //... are showing under shadows padding: theme.spacing(2, 4, 3), //... are showing under spacing }, })); I think this code used to work with import { makeStyles } from '@material-ui/core/styles'; but, after v5 update how to make it work. And these ... dots are coming under the 3 lines of code. I hope you would know how to resolve it.
One thing is makeStyles is in @mui/styles now and you'd still have to import theme as well. If this is the way all your MuiPapers will look, put it in a defaults theme.js and use your styleOverrides to redesign the paper. Or add a variant and name it MuiCustomPaper and style it there so you can use it anywhere you like. If not, use it the way you are doing it now but without passing theme into makeStyles and instead of theme.palette.etc just put the color you want as a string. Again, this is only IF it's a one-time style. I think I showed all of this in this video in one way or another. GL!
You may be right. But I'm not 100% certain. I ran into issues deploying a site a couple of months ago and until I applied "save", it didn't include them when I ran npm run build. Either way, it's not too much trouble to type an extra 6 characters to be safe
Thanks for a good video. I'm new with material ui. I want to add breakpoints to the file you created to display or hide some components in specific breakpoints. how can I do that?
See the code below const styles = (theme) => ({ myDiv: { backgroundColor: 'blue', [theme.breakpoints.up('md')]: { backgroundColor: 'red', }, }, }); In this code, the background of an element with className={classes.myDiv} would change color on a md breakpoint that is already specified by MUI, ( you can change these breakpoint values globally as well). But if you just want to be able to use the breakpoints and not change where they break, then use this in your page. Of course, there is a bit more dependencies and stuff you gotta play with but this is actual acting agent. I made a sandbox test that will hopefully help codesandbox.io/s/v5-withstyles-forked-1wh8r?file=/src/index.js Good luck
Lol I do? lol sorry. I know I talk a lot but never heard I talk slow. Anyway, my bad. I suck at YouTubing. I would starve if I had to make a living from this. Lol.
You seem like a great guy and I wish you the best on your development and RU-vid journey. If I could make a suggestion; it would have been great to somehow indicate the level of this guide through the title or description. GL in future endeavors!
