如何在材质用户界面中集中一个组件并使其响应？

我不太明白反应材料-用户界面网格系统。如果我想使用一个表单组件进行登录，在所有设备(移动和桌面)的屏幕上集中显示它最简单的方法是什么？

353867 次浏览
小开

您所需要做的就是将内容包装在 Grid Container 标记中，指定间距，然后将实际内容包装在 Grid Item 标记中。

 <Grid container spacing={24}>
<Grid item xs={8}>
<leftHeaderContent/>
</Grid>


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

另外，我已经与材质网格斗争了很多，我建议你签出的 Flexbox，这是内置在 CSS 自动，你不需要任何附加包使用。学起来很容易。

Https://css-tricks.com/snippets/css/a-guide-to-flexbox/

小开

另一个选择是:

<Grid container justify = "center">
<Your centered component/>
</Grid>
小开
最佳答案

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

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 仍然不支持材料用户界面网格，你会在 IE 中看到一些放错位置的内容。

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

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

请注意，MUIv4及以下版本应使用调整 = “ center”代替。

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

2022-06-06最新消息

除此之外，另一种更好的新方法是使用 Box组件。

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

这最初是由 Killian Huyghe 作为另一个答案发布的。

希望这个能帮到你。

小开

@ Nadun 的版本对我不起作用，尺寸也没有起到很好的作用。删除 direction="column"或将其更改为 row，有助于构建具有响应大小的垂直登录表单。

<Grid
container
spacing={0}
alignItems="center"
justify="center"
style=\{\{ minHeight: "100vh" }}
>
<Grid item xs={6}></Grid>
</Grid>;
小开

下面是另一个没有网格的选项:

<div
style=\{\{
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)'
}}
>
<YourComponent/>
</div>
小开

您可以使用 Box 组件完成以下操作:

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


...


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

在使用其他答案时，xs = ‘ auto’给了我一个窍门。

<Grid container
alignItems='center'
justify='center'
style=\{\{ minHeight: "100vh" }}>


<Grid item xs='auto'>
<GoogleLogin
clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
buttonText="Log in with Google"
onSuccess={this.handleLogin}
onFailure={this.handleLogin}
cookiePolicy={'single_host_origin'}
/>
</Grid>
</Grid>
小开

小更新07-09-2021’证明’现在是’证明内容 =’中心’

Https://material-ui.com/components/grid/

小开

只要做 style=\{\{display:'flex';justifyContent:'center';alignItems:'center'}}

小开

如果你只是需要在 MUI v5中的一行或一列中心两个项目，你可以使用 Stack而不是 Grid:

<Stack alignItems="center">
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>

行方向的另一个例子:

<Stack direction="row" justifyContent="center">
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>

现场演示

Codesandbox Demo

小开

对我来说，最通用的解决方案是使用 集装箱和 项目道具的组合。

集装箱和 项目道具是两个独立的布尔值; 它们可以组合在一起，以允许 Grid 组件同时是一个 Flex 容器和一个子容器。

网格 MUI 文档 -https://mui.com/material-ui/react-grid/#responsive-values

<Grid container alignContent={'center'} xs={12}>
<Grid container item xs={6} justifyContent={'start'}>
<span> content one </span>
</Grid>
<Grid container item xs={6} justifyContent={'center'}>
<span> content two </span>
</Grid>
</Grid>

提交答案