如何在MUI中居中放置组件并使其响应？

Question

我不太了解React Material UI网格系统。如果我想使用表单组件进行登录，那么在所有设备（移动设备和桌面设备）上将其置于屏幕中心的最简单方法是什么？

Answer 1

可以使用长方体组件执行此操作：

import Box from "@material-ui/core/Box";

...

<Box
  display="flex"
  justifyContent="center"
  alignItems="center"
  minHeight="100vh"
>
  <YourComponent/>
</Box>

Answer 2

另一个选择是：

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

Answer 3

因为你要在登录页面上使用这个。这是我在登录页面中使用材料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> 

这将使此登录表单位于屏幕中央。

但是，IE不支持材料UI网格，你会在IE中看到一些放错地方的内容。

正如@max所指出的，另一个选项是，

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

请注意，版本MUIv4及以下版本应改为使用证明="中心"。

但是，在没有网格项的情况下使用网格容器是一种未记录的行为。

希望这对你有帮助。