The ULTIMATE guide to styling/customizing Material UI (MUI)
HTML-код
- Опубликовано: 7 фев 2025
- Have you ever struggled with customizing/styling Material UI (MUI) components? When you start out (and even later on) it can be a very common issue. So in this video I'm explaining all different methods for styling and customizing, when to use each technique and more advices. You'll learn everything you need to never struggle anymore!
If you found this video helpful,
please give it a like 👍 and subscribe 📨 for more.
⏰ Timestamps
0:00 Intro
1:13 Method 1: Component props (API)
2:32 Method 2: Sx prop
3:20 Method 3: Styled function
3:40 Method 4: Css function
3:52 Method 5: CSS stylesheet
3:59 Method 6: CSS Modules
4:07 Method 7: Theming
5:07 Theme Palettes
7:45 Styling best practices and tips
8:38 Styling complex components
10:00 Outro
🐦 Follow me on Twitter
/ 0xandriy
🎵 Where I get my music from
Epidemic Sound: www.epidemicso....
🤝 Services I use
NordVPN - go.nordvpn.net...
🎥 My gear
Monitor - Dell S3423DWC 34
amzn.to/3XcAXuR
Headphones - AKG K240 Studio
amzn.to/3J7vAZJ
Earbuds - Jabra Elite 4 Active
amzn.to/3Hm4k8M
Mic - HyperX SoloCast
amzn.to/3QLS6tg
Keyboard - Apple Magic Keyboard
amzn.to/3GDz9UO
Trackpad - Apple Magic Trackpad
amzn.to/3CQAq9P
Camera - Sony a6400
amzn.to/3w4d7Wf
Lens 1 - Sony 16-50mm f/3.5-5.6
amzn.to/3iDSk99
Lens 2 - Sony - FE 50mm F1.8 Standard Lens
amzn.to/3GHFheU
Lens 3 - Samyang SY12M-E-BK 12mm F2.0
amzn.to/3WclDgM
📬 Inquiries (Collabs, Sponsorships etc.)
frontstartdev@gmail.com
Found this helpful? You can support me with a coffee ☕ bmc.link/frontstart
What other MUI/Material UI topic do you want me to cover?
Before I have seen the views of the video, I thought that the video has at least 300k views. The quality is so good
As a react developer who is new in MUI, this video is a reference by it's own.
The docs are overwhelming at first without a guide through. Your video was just perfect. Thanks.
Thanks, that's more helpful than the official doc 😁
Please make a separate video for theming and man you really nailed it for me thank yoi very much for creating this video
Recently, I searched for some videos to learn MUI customization. Suddenly, RUclips suggested your channel to me. I learned so much from your videos, and it was worth spending my time.
Sooooo helpful, thank you! I would def watch a more in-depth video on the theme abstraction.
People are trying to explain this whole stuff in hours but bro nailed it in 10 Minutes🔥😍
Haha thanks!
I saw your Learn MUI video and got amazed as how well you explain and this is no different, very useful not just for styling MUI, but for styling in React in general , I hope you make that theming video
Thanks for the kind words! I sure will 👍
Thanks alot for making this video short and Informative. Now I am confident enough to make decitions while applying styles to mui components
Thanks for the short overview of customizing MUI components. The 2-hour and 4-hour tutorials seamed very overwhelming to start with but now I after watching this I'm more confident to deep dive into docs and actual projects. Thanks a lot.
Great video, thank you! Between this and your Learn MUI in under 10 mins video I have worked out that I have been doing it all wrong 😂
Haha there is always something to learn 😁 glad you found it helpful!
I also want to mention that the ten minute video format your using is perfect imo
Great video!
I think you should do more videos on these topics.
Maybe something around themes, or how to organize styling in a project, etc.
I didn't understand mui until I saw two of your videos, epic 🔥
I'll be looking out for your videos 💯
Very useful and consice video! Since there are so many ways to do responsiveness in MUI, can you please create a video covering the pros and cons of each way of applying responsive styles?
You made it so easy, gotta learn some MUI tips from you, subscribed! And thanks for the great content!
Answered most of the questions. Great video.
Would love to know more about theming in depth. Thanks
very straightforward, fun, and valuable informations here! amazing tutorial, I wish all tutorial could be like this.
Sure, would like to have a dedicated video on createTheme.
Useful video. We look forward to other special videos like themes and treeview and datagird
Nice concise tutotiral, thanks a lot for dividing different methods.
Really good overview! Thank you!
Hey, I can't find the video on Theming. I hope it's uploaded soon. This video was very helpful. Thanks for helping out beginners like us. Subscribed !!
Kindly add some more Videos about MUI. It really helps me.
A video on theme customization in detail 💯🔥
Really Amazing Video , you earned yourself a new subscriber.
great content that I was looking for!! Thank you so much....
Thanks man, it's concise and easy to understand
You are a good explanator man!
I love you FrontStart. Thank you!!
Thank you so much! Please make a video just about theming
Amazing video, man! Thanks for that!
It would be really great if you make a complete video on theming 👏🏻👏🏻👏🏻
Keep making more useful videos, Thanks a lot!
Great video, man! Thanks!
You got a sub 😅, would love to see detailed MUI theming
This was so beneficial , thanks a lot !
Glad you found it helpful!
Crazy useful video. Thank you so much for the content.
super helpful for a beginner like me. Thanks!
Nice for a first approch, thanks!
Thanks pal. Very useful video.
Thanks ❤.
Please make more videos of your experiences.
Thanks so much man ... that was super helpful.
That was perfect but I wanted more explanation of the last part and how the & works and how the : stuff works!
Such a detailed video! Thank you!
Really helpful bro, Thanks a lot ❤❤
that was very useful, Thanks a lot.
need more detailed video on theme and styled components
Great video - straight to the points & perfect example. Covers from zero to hero in less than 10min
great video, keep the good work
Thanks a lot. It helped a lot.
Super, thank you !
Thank you, mate 💪🏼
that was awsome, please make it about Ant design.
Great video!
love from India brother ❤
Great content. Subscribed.
Helpful Video 👍🏻
Would it make more sense to use all the css of my project in a single css file, or would it make more sense to use sx in each page? Apart from all this, would it make sense to create piecemeal css codes in themes.js and call them in sx on my pages?
It's too helpful Thanks
Thanks for your video, how do we know when to use sx vs styled ?
Hey bro please make some tutorials on material ui with projects using typescript with customisation as well
Hey, I really liked your video-it was super helpful! But I still feel like there’s a lack of content about customizing Material UI themes, especially since so many people use it.
I have to use it daily, and I find the documentation really bad. It doesn't explain anything! I always get stuck somewhere and end up having to 'invent' a solution.
How do you add some custom colors with custom names
its great video, thanks!
Glad you liked it!
Could you tell please how to customize IconButton. It doesn’t work for me for some reason
Great video
How can I use Figma code connect wthi MUI components?
Why does styling set in sx getting overridden by the theme?
Hey, how I merge two themes? I have a chakrui theme and a material ui theme. How I exactly use deepmerge ? Can anyone help
Can you make video on CSSVarsProvider?
awesome video
Amazing! Thank you very much for that, got a subscriber! Cheers from BRazil!
Im having a portfolio project on an e- commerce web in a code boot camp. Really struggle on building or even simply cloning from one .Im using React and MUI, just trying to make landing page, item-list page, cart page, checkout page, and login page , but almost get depressed to smash my lap...do you have any advice for me? Just cant hold much of my negative, sorry...
I am getting Invalid hooks call error , please help me to solve this problem
Mui better put your video link in their docs 😂, and bhoom all the dev will began using MUI,
Man if I haven't found your video I would've switched to nextUI or bootstrap.
Please help us 🙏, we want to know more information. Maybe you can understand how to do a select with search, for example. I really need this because I will go crazy while doing it. How we can change label, delete animation, etc
Привіт! Sure. Are you looking for something like this?
mui.com/material-ui/react-autocomplete/
❤
What site is that where you are looking up your colors with the shades.
on the mui website go to customization/color/
Still a lot of ground to cover. I think the hardest is to know how to restyle the components based on client's needs. Sometimes they have a specific schema or company colors they want to implement and then the hard work of targeting classes and subclasses begins.
It good bro
เข้าใจง่ายมาเลยครับ
While using modules on Button some of the styles dont apply like padding margin color does not. Change
What do you mean by that? Can you give some details and context?
@@frontstartdev I am new to MUI previously I used to work with css modules for styling. So when I change the style of mui button through css modules by prop name className only thing I am able to change is width. Color, margin ,padding does not change with css module
hi what about MakeStyles hook ? Thx
It's depricated. Use styled() instead.
Great
¿Derecha?, anti dictadura diría yo.
make a cheatsheet of these .
MUI IS A HORROR SHOW
LOTS OF GOOD STUFF YOU MENTION BUT ALSO LOTS OF BAD THE DOM BLOAT IS OUTTA CONTROL AND TARGETING SPECIFIC CLASSES AND NESTED CLASSES IS SUPER ANNOYING.
Maybe show the Textfield WHICH IS HELL
YES BUT THEN YOUR JSX IS EXCEEDINGLY UGLY!!!! With a ton of PROPS INSIDE IT. THEREFOR I PREFER SIMPLE BOX SHADOW: NONE IN CSS !!! Or you need to globally disable it in theme .
THIS VIDOE IS MISLEADING
There focus on TOUCH FORCES EVERYTHING TO START OFF t 48 PIXELS VERRY ANNOYING . MAJOR DOM BLOAT NESTED CLASSES HELL. Rippple should be default to disabled and only when added in
I AM AN WXPERT TRUST ME IT SUCKS SWITCH TO MANTINE
shit
I saw your Learn MUI video and got amazed as how well you explain and this is no different, very useful not just for styling MUI, but for styling in React in general , I hope you make that theming video
Great! Thanks!