The ULTIMATE guide to styling/customizing Material UI (MUI)
HTML-код
- Опубликовано: 13 май 2024
- 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.)
frontstartdev@gmail.com 
Наука
![Shoreline Mafia - HEAT STICK (OHGEESY & FENIX FLEXIN) [Official Music Video]](http://i.ytimg.com/vi/xKEY6THtwuA/mqdefault.jpg)
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?
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.
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.
Thanks, that's more helpful than the official doc 😁
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?
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.
A video on theme customization in detail 💯🔥
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!
Sooooo helpful, thank you! I would def watch a more in-depth video on the theme abstraction.
The docs are overwhelming at first without a guide through. Your video was just perfect. Thanks.
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 !!
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 👍
I also want to mention that the ten minute video format your using is perfect imo
Such a detailed video! Thank you!
Thanks man, it's concise and easy to understand
People are trying to explain this whole stuff in hours but bro nailed it in 10 Minutes🔥😍
Haha thanks!
You made it so easy, gotta learn some MUI tips from you, subscribed! And thanks for the great content!
Crazy useful video. Thank you so much for the content.
Useful video. We look forward to other special videos like themes and treeview and datagird
need more detailed video on theme and styled components
very straightforward, fun, and valuable informations here! amazing tutorial, I wish all tutorial could be like this.
Answered most of the questions. Great video.
Would love to know more about theming in depth. Thanks
I didn't understand mui until I saw two of your videos, epic 🔥
I'll be looking out for your videos 💯
Nice concise tutotiral, thanks a lot for dividing different methods.
Thank you, mate 💪🏼
Thanks so much man ... that was super helpful.
Really helpful bro, Thanks a lot ❤❤
Amazing video, man! Thanks for that!
Keep making more useful videos, Thanks a lot!
Really Amazing Video , you earned yourself a new subscriber.
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.
You are a good explanator man!
It's too helpful Thanks
This was so beneficial , thanks a lot !
Glad you found it helpful!
Helpful Video 👍🏻
It would be really great if you make a complete video on theming 👏🏻👏🏻👏🏻
super helpful for a beginner like me. Thanks!
Thanks pal. Very useful video.
Super, thank you !
Thanks ❤.
Please make more videos of your experiences.
Thanks a lot. It helped a lot.
I love you FrontStart. Thank you!!
You got a sub 😅, would love to see detailed MUI theming
That was perfect but I wanted more explanation of the last part and how the & works and how the : stuff works!
that was very useful, Thanks a lot.
Great video
Thank you so much! Please make a video just about theming
great video, keep the good work
Thanks for your video, how do we know when to use sx vs styled ?
Great video!
Great! Thanks!
its great video, thanks!
Glad you liked it!
love from India brother ❤
Sure, would like to have a dedicated video on createTheme.
that was awsome, please make it about Ant design.
It good bro
awesome video
What site is that where you are looking up your colors with the shades.
on the mui website go to customization/color/
เข้าใจง่ายมาเลยครับ
Great video - straight to the points & perfect example. Covers from zero to hero in less than 10min
Hey bro please make some tutorials on material ui with projects using typescript with customisation as well
hi what about MakeStyles hook ? Thx
It's depricated. Use styled() instead.
Hey, how I merge two themes? I have a chakrui theme and a material ui theme. How I exactly use deepmerge ? Can anyone help
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?
❤
Could you tell please how to customize IconButton. It doesn’t work for me for some reason
Great
Can you make video on CSSVarsProvider?
I am getting Invalid hooks call error , please help me to solve this problem
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...
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
Why does styling set in sx getting overridden by the theme?
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/
make a cheatsheet of these .
shit