如何在 MUI 中居中组件并使其响应? [英] How to center a component in MUI and make it responsive?

问题描述

我不太了解 React Material-UI 网格系统.如果我想使用表单组件进行登录，在所有设备(移动设备和桌面设备)上将其居中显示的最简单方法是什么?

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)?

推荐答案

因为您将在登录页面上使用它.这是我在使用 Material-UI 的登录页面中使用的代码

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

MUI v5

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

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

MUI v4 及以下

<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.

但是，IE 仍然不支持 Material-UI Grid，您会在 IE 中看到一些错位的内容.

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

正如@max 所指出的，另一种选择是，

As pointed by @max, another option is,

<Grid container justifyContent="center">
  <Your centered component/>
</Grid>

请注意，MUIv4 及以下版本应使用 justify="center";

但是，使用没有 Grid 项的 Grid 容器是一种未记录的行为.

However, using a Grid container without a Grid item is an undocumented behavior.

希望对你有帮助.

这篇关于如何在 MUI 中居中组件并使其响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！