React Material UI Tutorial - 14 - Box

welcome back everyone in this video let's take a look at our first layout related component which is the box component and this is a component we have already seen in the earlier videos primarily the box component serves as a wrapper component for most of your css utility needs let's understand what that means with a few examples let's begin by creating a new file in the components folder mui layout.tsx within the file i'm going to create a new component now the box component in its most basic form is used as a replacement to the div tag so at the top let's import box from material ui and use it instead of the div tag within the box component i'm going to add some text code evolution if you now include the component in app component and take a look at the browser you can see the text code evolution if we inspect the element you can see it is a plain old div tag the box component since it is a wrapper component you will be using it in most of the pages you would be building of course you might not always want to wrap your content with a div tag if you're focusing on semantic html it could be a section tag an article tag etc to account for that the box component accepts a component prop for example if we specify component is equal to span take a look at the browser the underlying component is now a span tag everything else remains the same now you might ask why not simply use the div span or other html elements well that is because the box component accepts a prop called sx which can be used for defining a custom style that has access to the theme let's add some styles to this box component sx is the prop and this is going to be equal to an object here let's specify background color and this is going to be equal to primary dot main and this corresponds to a color from our predefined theme let's add another property color set it to white height 100 pixels the same with width padding 16 pixels and finally we're going to specify styles when you hover over the element and for that we specify ampersand colon hover this again is an object where we are going to change the background color to primary dot light this again is from the theme palette i'll also remove the span component prop if you now take a look at the browser you should see a hundred by hundred box that changes color on hover now if you were to use regular inline styles on a normal html tag you cannot access the theme nor specify hover styles like we have done here the box component as you can see is pretty useful the other part you should know about the box component is that as a css utility component it supports what are called material ui system properties that simply means you can use a lot of the css properties as a prop directly on the component let me show you an example i'm going to wrap it with fragment and add a new box on this component now i'm going to directly add a few style props that material ui supports let's add display equals flex and a height of 100 pixels width of 100 pixels now the display flex prop does not affect our layout in this current component but i just wanted to show you how to create a flex container now what you should also know is that mui system properties also have a shorter name for a few properties so bg color will apply the background color which we can set to success dot light this again is from the theme palette we can also specify the letter p for padding and assign a value that by default is multiplied by 8 pixels so p is equal to 2 would be 16 pixels if we save the file and take a look at the browser you can see we have another box component now there are a lot more system properties and they are something you learn when you start using them however if you're interested in learning about them now head over to material ui docs and under system navigate to properties here you can see the full list of system properties you can apply the corresponding css properties and the theme mapping you can then look at the individual properties like border display palette sizing etc and look at examples of how you can use those properties now if you're wondering what is the point of doing this well it is sometimes easier to specify styles this way rather than coming up with a name for every component which you might have done when working with styled components its personal preference but i wanted to make sure you understand the material ui way of specifying styles the box component is a fundamental layout component and is something you're likely to use in every page of your application in the next video let's take a look at our next layout related component

Channel: Codevolution

Views: 48,068

Keywords: Codevolution, React, React Material UI, Material UI, Material UI React, MUI, React MUI, MUI React, React Material UI Tutorial, Box, Material UI Box

Id: JlI5j37sbIE

Length: 7min 27sec (447 seconds)

Published: Sun Mar 13 2022