MUI / Material UI - 5 PRO TIPS

material UI is a huge library with tons of features I remember when I started it was kind of confusing because there were tons of options and ways of doing things and even after years working with this Library I still come across new things from time to time so in this video I'm going to show you five really cool and useful tricks that I learned in my time using material UI so even if you're experienced I bet that at least one of the tricks will be new to you so keep watching and let's dive right into it when styling material UI component on how do you apply Styles chances are you're using DSX prop and there is nothing wrong with it but there is an alternative that you probably didn't know what you can do is to add Styles like this you pass the Styles as direct props to the component these props are called system props you can add padding B radius box Shadow maximum width and pretty much any common CSS style this way these system props are available in basic components such as box typography button and so on but which of these are available depends on the component the Box component has the most of these props not only can this be easier to read but there is also a performance benefit because it requires less style parsing than the SX prop but this might only be noticeable on pages with hundreds or thousands of elements this is an interesting topic so if you want to learn more about performance implications of different styling methods in mui let me know down in the comments now speaking of St filing as you know when using material UI you usually create a theme that your components can use so you can say for example color primary or secondary and it works you have also access to the theme in certain CSS props such as color or background color that is because these are socalled theme aware properties but what about properties that are not theme aware let's say we want to give this card a shadow and want to use our primary color from our theme we can't use primary main here instead we can use a function like this essentially every CSS prop also takes a callback function with a theme object so you can access the theme anywhere you want for unusual or complex use cases and if you have multiple props that need to access the theme you can pass a function to the SX prop simple as that that's cool and all but what if you need the theme outside the component props like in this case that's also Al easy mui has a hook that gives you the theme object so you can do with it whatever you want for example let's say you have a button in which you set the variant to contain you like how it looks in light mode but in dark mode you want it to be outlined in this case you can simply take the theme object check the mode and conditionally apply the variant easy and here's one more cool thing you can do now if you have normal HTML elements or components from other libraries you can style them using your theme that way you can keep your styling concise and reuse all the values you set in your theme how cool is that now before we continue I want to quickly thank mini suburo for sponsoring this video they have all kinds of tag accessories mainly for Apple products including a lot of high quality docking stations this one that I'm using is the MD 6950 D and it has all the ports you can imagine you can connect up to three monitors using display link which is really nice on a MacBook like mine the M2 which which is limited to One external monitor by default the docking station is powered so I only need one cable to connect it to all my stuff I have which is really cool because I only need one cable which makes it easy to take off my laptop at any time also as you can probably tell the build quality is top-notch I've been using it for a while now and I really like it so if you're thinking of buying a docking station definitely check them out link is down in the description and now back to the video so earlier we took a look at the Ed theme hook and while we're at it I'll show you another another really useful hook that mui has to offer let's look at this example in this mui component we have different values based on the screen size breakpoints these breakpoints come from the theme that's really useful but this syntax is only available here what if we want to load different content depending on the screen size or have multiple values for some props in this case we can use the use media query hook you can either pass it a CSS media query like this or pass it a theme object to access the break points in order to get the theme we can use the hook from earlier or you can just use a callback function which already contains the theme this way we can create a bullion that tells us if the screen is small medium or whatever breako we need and now we can use it to display different content and change props depending on the screen size while keeping one source of Truth which is the theme and finally while we're on the topic of breakpoints did you know that instead of using an object with break points you can also use an array if you have different values for each breakpoint it can be easier to read but probably a better use case is to do something like this we give the SX prop an array in which we Define a base style and then add a bunch of styles depending on some conditions the higher the index the higher the specificity that means the last Styles override the ones before them you can use this with breakpoints or other conditions whatever you want and that's all for this video let me know down in the the comments which one of the tips was new to you and which one was the most useful I'd really appreciate if you leave a like because it helps me out a lot and subscribe if you want to see more of this kind of content I'll see you soon

Channel: FrontStart

Views: 3,485

Keywords: MUI for beginners, MUI tricks, MUI tips, Material UI tricks, Material UI tips, Material UI theming, MUI theming, Material UI hooks, MUI hooks, MUI customizing, Material UI customizing, Material UI tutorial, MUI tutorial, Material UI get started, MUI get started, Material UI beginner tutorial, Material UI theming tutorial, MUI hacks, Material UI hacks, Material UI 2024, MUI 2024, Material UI project, MUI project, Material Design React, Material Design tutorial, MaterialUI

Id: trFXnXtarvg

Length: 5min 46sec (346 seconds)

Published: Wed Jan 10 2024