Theming with Material UI | React tutorial
HTML-код
- Опубликовано: 21 фев 2023
- In this video we focus on modifying the default Material UI theme and look at basic and advanced techniques to customising your theme.
The github repository: github.com/RidhwanDev/mui-the...
The technologies used in this video include, React and Typescript.
I made a mistake in the video when I said the `sx` prop is the same as the `style` prop. There are some differences to it, sx comes from MaterialUI and provides extra properties that make it easier for us to style i.e `p` which is shorthand for padding but you can also have things like `py` which will set the vertical padding and `px` to set horizontal padding. Have a play around with some of the other things it has to offer.
Also I don't think you can access the theme variables using style (vs styled) option whereas with sx you can access the theme properties. I would go as far as to say that using style is the least preferred way to style any component. Do you agree?
@@jetmartin9501 Yes definitely agree!
Nice video! just wanted to add that `sx` does not inline styles as `style`. Instead MUI creates and adds a class with a random name based off of those props defined within `sx`.
lol, I was about to comment on this, good job addressing it 😅
Excellent tutorial! I really appreciate you taking the time to explain even the minor details and giving an example of each thing rather than say what can be done. Please continue making more!
Thank you for taking the time to put together this excellent video. Even though one may find this information in the docs, someone explaining it through a video makes it a lot easier to understand than going through the docs and you have taken on that hard work to make it easier for all of us and thank you for that. The only feedback I would give is to zoom into the code in the video or make the code fonts larger so that it is more visible on smaller devices such as tablets. Thank you again.
I have been struggling for 3 days to learn these until I find you. Thank you a lot.
This needs more views. Take it from me who learned MUI and Styled Components the hard way... I WISH I had it explained to me like this! Great job.
Thank you! 🙂
The best tutorial on MUI and Nextjs, why is RUclips hiding you😅
Watched Multiple tutorials on Material UI theming, but I found this one the best of all...!!!
Highly recommended, you won't regret watching it. Thank you so much, sir, Just subscribed to your channel looking forward to having more videos on Material UI by creating some real-world projects.!!!
Great overview of theming in Material UI. Good explanations of the what and how to do it. Thank you
Great video, thank you so much for your time on this
This is really helpful. Keep them coming.
Really helpful, clear explanation! Thanks so much!
Learned a lot from this! You're a great teacher and deserves way more likes and subs, keep it up!
I would love to see more of your content about Material UI!
I appreciate the support, thank you! Lots more videos coming soon
THANKS A LOT! This is an excellent tutorial for complete MUI beginners like me.
great video, thank you
EDIT: as someone learning to code, using React and MUI, I would definitely appreciate more of these MUI videos. Maybe some on best/common practices etc, could be in regards to theming, project structure etc
Count me
Very interesting, I look forward to see the video on breakpoints
Me too!
Just stated learning mui your video helped a lot and looking for a practical video that covers most of the things needed in a project.
Great video thank you!
Great explanation. Didn't know about stack. I'm using it now and exports too. MUI make styling soooo simple
Awesome 😎
The only thing bad about this video is; it ends. Good content, brother.
Great video. My only feedback would be to slightly increase the font size in VSCode so we can better see what you’re doing.
You did great. I speak german and understood you perfekt. Your articulation and volume was good. It was not too much information but also not too less and more important it was not to hard to understand. So it was a good video
Great Video Thanks
Great explanation. Would like you to make short video on light and dark mode and customized components.
Straight up gold
very well made, code should be zoomed lil bit, it is very small for presentation
Thank you so much! This is a great resource!
Would it be possible to write media queries inside styleOverrides object? Lets say I set a default padding for a component however I would like to increase/decrease this padding as window grows/shrink. I can use sx prop directly on component to achieve this however I would prefer to set it up inside of my theme and and keep my component smaller.
I will be looking into this if anyone wants to chime in I will appreciate it!
MuiContainer: {
styleOverrides: {
maxWidthLg: {
padding: "40px 24px",
"@media (min-width: 600px)": {
padding: "64px 24px",
},
},
},
},
Alright got it
@@radovanbotik Good question, I believe the snippet you provided would only effect a specific variant of MuiContainer which is when you set the maxWidth prop to 'lg'. You could set this on the root using breakpoints. I.e
....
root: {
padding: "40px 24px",
[theme.breakpoints.down('md')]: {
padding: "50x 24px",
},
[theme.breakpoints.down('xs')]: {
padding: "64px 24px",
},
}
....
@@ridhwanio Yeah that was I aiming for, thank for reply though🔥
Ah right, nice one! I would still recommend using [theme.breakpoints] within that styleOverride anyways so that it can be consistent with all the other mui media queries. Thank you for the support 🙏🏽
absolute legend
I think a more comprehensive video that discusses all of the options for styling your components (Theme, styled, sx, inline styling, CSS files, etc) and the tradeoffs of each approach could be very interesting...and then concluding with a list of recommended styling approaches could make for an interesting video.
Also I think it would be nice to do more of deep dive on theming could be useful...e.g., how do you change the styling of various states (e.g., hover, selected, etc.).
Just some ideas.
Thanks @jetmartin9501, I'll keep this in mind!
That answered some blanks for me so thanks. What I don't get is where Emotion comes in?
hi,thanks for video.But i have question:is it better to have one theme file or many for your different components?
If you have many different components you could benefit from splitting it out. However if you’ve only a few components then it would be better to keep it in the same file. This comes down to personal preference though.
Why wasn't ownerState flagged by typescript with "implicitly has an 'any' type."? This is what I'm stuck with
Good stuff - responsiveFontSizes doesn't seem to work with Typography for me. Should it work on Typography?
Yes it should work specifically with typography. Have you configured your theme provider and css baseline correctly?
I had not done that correctly, but now have. What I notice is that when I toggle the device to a phone (in Chrome) it works. But when I manually drag the screen to make it smaller it does not work. @@ridhwanio
I cloned your exact code and it is working as you described. Something with my app is causing issues. Thanks! @@ridhwanio
The content is good, but I suggest you could have zoomed in to see the code clearly.
Thanks for the feedback!