How to center a component in Material-UI and make it responsive?
Today, we will learn how to bring your React component to the center using Material-UI and make it responsive across multiple screens.
We will quickly create this simple login form and see how can we bring it to the center of the web page. We will also see how can you make it responsive across all screen sizes.
Hey! this is Deeksha from Bonsaiilabs and welcome to this Material-UI video. Today, we will learn how to bring your React component to the center using Material-UI and make it responsive across multiple screens.
We will quickly create this simple login form and see how can we bring it to the center of the web page.
I am using CodeSandbox for this exercise and have already bootstrapped a React Project.I also added this latest Material-Ui dependency and removed the boilerplate code that came with this sandbox. As you can see there is nothing more than a blank web page.
We will break the problem into small pieces. So the first part is to create a login component. We will not worry about making it responsive or bringing into the center. Just create the component first.
You can create a new file with name Login and write the code for that component, but I will create a component here itself just for the sake of ease.
We are using
<Grid> component from Material-UI and this is our container to hold
2 text fields and a button. Let's use the
direction prop with value
That's because we want to render everything vertically inside this container.
Align the items to the center and also justify all the content to the center.
These are out of the box props that comes with
component from Material-UI.
Next, we will add 2 textfields. TextField is also a component that Material-UI gives you off the shelf. This is great because you don't have to write the code for all these components with a lot of CSS. There are lots of variants of Textfield that you can use. Here I am using outlined with a label Email and make it appear fullWidth. By default, fullWidth is false so when we add this prop, it makes the value true.We want to use the same style for the other textfield as well and just change the label to Password.
We need a login button, so let's add a Button component. Its size can be large, it should be a contained button and the color can be primary. Note that this primary color is coming from the default theme of Material-UI. If you customize your own theme, then it will be the primary color of your theme.
Let's close this window to get some space and call our
<Login> component here.
Well! this is not something we wanted but don't worry, we will fix this next.
Let's first add a label to our button so that it doesn't look this odd.
We will also add inline style with a
marginBotton so that email, password
and login button don't stick to each other as close as they are.Alright! not bad.
Here inside this
<App> component, will give some finishing touches. Replace this
<div> with the
<Grid> container. As usual, we need to justify everything to the
center and items should also align to the center. The direction of items inside
this container should have a column direction.
Then, we will add two Grid items inside this container. The first one will have
<Typography> component with variant heading6 and color primary.
Let's say we will render Bonsaiilabs inside it. This is what we created so far.
But this login component is still kind of sticking at the top, we want to bring it
to the center of the web page. And for that we will go ahead and add another
inline style and give it a
minHeight: "100vh" and that brings the component to the
center both horizontally and vertically. Another thing is to quickly add the
spacing prop with value 5. It takes values from 0 which is the default and upto 10.
It defines the space between
<Grid item> components.
You can use this prop when your Grid component is a container and the integer value
provided is multiplied by 8px because Material-UI uses 8px baseline grid.
You can test the responsiveness by moving the browser window.
Our design had a gray color border, so we can add that to Login component and there you go. You can test and it works great across all screen sizes.
You could add the breakpoints for various screen sizes in your Grid item components.
I have another video on Material-UI Grid that you can watch to see how that works. Well! I hope this was useful. Thanks for watching and let's meet in the next video. Until then, take care guys!