我不太了解 React Material-UI 网格系统。如果我想使用表单组件进行登录，在所有设备（移动设备和桌面设备）上将其居中显示的最简单方法是什么？
如何在 MUI 中居中组件并使其响应？
IT技术
reactjs
authentication
mobile
material-ui
desktop
2021-04-01 07:56:34
6个回答
因为您将在登录页面上使用它。这是我在使用 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>
这将使此登录表单位于屏幕中央。
但是，IE 仍然不支持 Material-UI Grid，您会在 IE 中看到一些错位的内容。
正如@max 所指出的，另一种选择是，
<Grid container justifyContent="center">
<Your centered component/>
</Grid>
请注意 MUIv4 及以下版本应使用 justify="center" 代替。
但是，使用没有 Grid 项的 Grid 容器是一种未记录的行为。
希望这会帮助你。
另一种选择是：
<Grid container justify = "center">
<Your centered component/>
</Grid>
您可以使用 Box 组件执行此操作：
import Box from "@material-ui/core/Box";
...
<Box
display="flex"
justifyContent="center"
alignItems="center"
minHeight="100vh"
>
<YourComponent/>
</Box>
这是没有网格的另一种选择：
<div
style={{
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)'
}}
>
<YourComponent/>
</div>
@Nadun 的版本对我不起作用，尺寸调整效果不佳。删除direction="column"或将其更改为row，有助于构建具有响应大小的垂直登录表单。
<Grid
container
spacing={0}
alignItems="center"
justify="center"
style={{ minHeight: "100vh" }}
>
<Grid item xs={6}></Grid>
</Grid>;