reactjs - 如何使 MUI 中的组件居中并使其响应?
问题描述
我不太了解 React Material-UI 网格系统。如果我想使用表单组件进行登录,在所有设备(移动设备和桌面设备)的屏幕上将其居中的最简单方法是什么?
解决方案
因为您将在登录页面上使用它。这是我在使用 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 容器是一种未记录的行为。
希望这会帮助你。
推荐阅读
- python - Matplotlib 擦除图形并绘制新系列子图
- java - Java servlet 获取带有参数的 url
- ruby-on-rails - 在 Rails 上安装捆绑红宝石的问题
- python - 使用 pyspark 中 json 文件中的模式读取固定宽度文件
- android - Google MLKit 能识别同一张脸吗?
- angular - ngx-bootstrap - 光标离开弹出框本身后关闭弹出框
- c# - 从控制台应用程序调用而不是从 NUnit 测试调用时库工作
- c# - 如何使用外部类的实例访问嵌套类的属性
- python - 运行 Anaconda 导航器的终端中的 AttributeError (ubuntu 18.04)
- php - preg_match 如何返回匹配项?