The ULTIMATE guide to styling/customizing Material UI (MUI)

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.epidemicsound.com/referra...
🤝 Services I use
NordVPN - go.nordvpn.net/SH4vc
🎥 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.)
[e-mail]

[@frontstartdev]

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?

[@samiroutka]

Before I have seen the views of the video, I thought that the video has at least 300k views. The quality is so good

[@ehsanmz5725]

As a react developer who is new in MUI, this video is a reference by it's own.

[@TomCodeur]

Thanks, that's more helpful than the official doc 😁

[@joshDotJS]

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?

[@ze3ub]

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.

[@bulwinkel]

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 😂

[@frontstartdev]

Haha there is always something to learn 😁 glad you found it helpful!

[@shaungould8793]

Sooooo helpful, thank you! I would def watch a more in-depth video on the theme abstraction.

[@Sam-km9jl]

You made it so easy, gotta learn some MUI tips from you, subscribed! And thanks for the great content!

[@foveromw]

Recently, I searched for some videos to learn MUI customization. Suddenly, KZbin suggested your channel to me. I learned so much from your videos, and it was worth spending my time.

[@willysyafiq4863]

Thanks man, it's concise and easy to understand

[@juanmacias5922]

Such a detailed video! Thank you!

[@realdiegor]

The docs are overwhelming at first without a guide through. Your video was just perfect. Thanks.

[@ramiov3862]

Thanks so much man ... that was super helpful.

[@fabiojonathanarifin1]

very straightforward, fun, and valuable informations here! amazing tutorial, I wish all tutorial could be like this.

[@Igor-km5qp]

Nice concise tutotiral, thanks a lot for dividing different methods.

[@neovickson]

I didn't understand mui until I saw two of your videos, epic 🔥 I'll be looking out for your videos 💯

[@fernandonogueira2291]

Amazing video, man! Thanks for that!

[@jssecrets]

You are a good explanator man!

[@lazycode7]

Really helpful bro, Thanks a lot ❤❤

[@jacobstrength3945]

Crazy useful video. Thank you so much for the content.

[@soldadopreciso]

Thanks pal. Very useful video.

[@JoelRdz]

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

[@frontstartdev]

Thanks for the kind words! I sure will 👍

[@GurpreetHanjra]

Answered most of the questions. Great video. Would love to know more about theming in depth. Thanks

[@haroldriera5625]

A video on theme customization in detail 💯🔥

[@code-websites]

People are trying to explain this whole stuff in hours but bro nailed it in 10 Minutes🔥😍

[@frontstartdev]

Haha thanks!

[@shaungould8793]

I also want to mention that the ten minute video format your using is perfect imo

[@MohamedMahmoud-pe6qm]

Really Amazing Video , you earned yourself a new subscriber.

[@Ouail-Ocf]

This was so beneficial , thanks a lot !

[@frontstartdev]

Glad you found it helpful!

[@Lokacodes]

super helpful for a beginner like me. Thanks!

[@dinesh.p8642]

I love you FrontStart. Thank you!!

[@user-cv2ye7ol1m]

that was very useful, Thanks a lot.

[@habibbel2048]

Useful video. We look forward to other special videos like themes and treeview and datagird

[@dule88rs]

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.

[@kekoHere0610]

Thanks a lot. It helped a lot.

[@amancharlamanas3812]

Keep making more useful videos, Thanks a lot!

[@slava3234]

Thank you, mate 💪🏼

[@daniel.dushev]

great video, keep the good work

[@FaramarzF.R]

Thanks ❤. Please make more videos of your experiences.

[@mario_luigie4593]

Super, thank you !

[@mateustoledo2835]

Great video!

[@kekoHere0610]

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 !!

[@Ashish_singh_dev]

You got a sub 😅, would love to see detailed MUI theming

[@vivekbhatt3932]

Helpful Video 👍🏻

[@cristianohenriqueamorim8179]

Great! Thanks!

[@abhinavkumar8683]

It's too helpful Thanks

[@jorgejorge8878]

Great content. Subscribed.

[@francisboudreau7524]

It would be really great if you make a complete video on theming 👏🏻👏🏻👏🏻

[@matheus-il]

Thank you so much! Please make a video just about theming

[@user-iz2nb2cv7c]

Great video

[@y0na24]

its great video, thanks!

[@frontstartdev]

Glad you liked it!

[@map3056]

awesome video

[@yehudamakarov]

That was perfect but I wanted more explanation of the last part and how the & works and how the : stuff works!

[@rhymeskiduniya521]

need more detailed video on theme and styled components

[@masoudharooni2989]

that was awsome, please make it about Ant design.

[@kirilkirchev285]

Great video - straight to the points & perfect example. Covers from zero to hero in less than 10min

[@kiransp3294]

love from India brother ❤

[@abdalrahman_shebani]

Thanks for your video, how do we know when to use sx vs styled ?

[@janardanpethani5755]

Sure, would like to have a dedicated video on createTheme.

[@sankalpsaxena4300]

It good bro

[@user-jh4fc3hs2o]

เข้าใจง่ายมาเลยครับ

[@kaanakyuz5801]

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?

[@510218sk]

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...

[@azharsiddiqui3055]

Hey bro please make some tutorials on material ui with projects using typescript with customisation as well

[@MubashirullahD]

Great

[@MaxI-fw1vv]

Could you tell please how to customize IconButton. It doesn’t work for me for some reason

[@amey4521]

Hey, how I merge two themes? I have a chakrui theme and a material ui theme. How I exactly use deepmerge ? Can anyone help

[@makaim680]

What site is that where you are looking up your colors with the shades.

[@frontstartdev]

on the mui website go to customization/color/

[@lukasspfc18]

❤

[@mr.random8447]

Can you make video on CSSVarsProvider?

[@MrProgrammer101]

Why does styling set in sx getting overridden by the theme?

[@jayakrishnav420]

I am getting Invalid hooks call error , please help me to solve this problem

[@user-os7fm5wr6f]

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

[@frontstartdev]

Привіт! Sure. Are you looking for something like this? mui.com/material-ui/react-autocomplete/

[@emanojbisht]

While using modules on Button some of the styles dont apply like padding margin color does not. Change

[@frontstartdev]

What do you mean by that? Can you give some details and context?

[@emanojbisht]

@@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

[@pavelgilmutdinov6988]

hi what about MakeStyles hook ? Thx

[@frontstartdev]

It's depricated. Use styled() instead.

[@DYTVLOGGING]

make a cheatsheet of these .

[@kacperkepinski4990]

shit

[@skan90]

Amazing! Thank you very much for that, got a subscriber! Cheers from BRazil!