How to center a component in Material-UI and make it responsive?

reactjs mobile login material-ui desktop
zorro picture zorro · Jun 8, 2018 · Viewed 108k times · Source

I don't quite understand the React Material-UI grid system. If I want to use a form component for login, what is the easiest way to center it on the screen on all devices (mobile and desktop)?

Answer

Nadun picture Nadun · Jun 10, 2018

Since you are going to use this in a login page. Here is a code I used in a Login page using Material-UI

<Grid
  container
  spacing={0}
  direction="column"
  alignItems="center"
  justify="center"
  style={{ minHeight: '100vh' }}
>

  <Grid item xs={3}>
    <LoginForm />
  </Grid>   

</Grid>

this will make this login form at the center of the screen.

But still IE doesn't support the Material-UI Grid and you will see some misplaced content in IE.

Hope this will help you.

Related questions

How to detect when a React Native app is closed (not suspended)?

I have looked everywhere and cannot find an answer to this. How can I detect when a user is trying to close my React Native app (as in the process is running, and they manually manage their apps and force …

Read More
When should I add Redux to a React app?

I'm currently learning React and I am trying to figure out how to use it with Redux for building a mobile app. I'm kind of confused on how the two are related/usable together. For example, I completed this tutorial …

Read More
Can a React-Redux app really scale as well as, say Backbone? Even with reselect. On mobile

In Redux, every change to the store triggers a notify on all connected components. This makes things very simple for the developer, but what if you have an application with N connected components, and N is very large? Every change …

Read More