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