MUI - 如何将组件对齐到中心/右侧？

Posted 2023-02-22

【中文标题】MUI - 如何将组件对齐到中心/右侧？

【英文标题】：MUI - How to align a component to the center/right?

【发布时间】：2017-12-22 20:47:50

【问题描述】：

我想将我的按钮对齐到父级的右侧。

我想知道在 MUI 中是否有一种正确的方法来做到这一点。我可以使用：

<Grid container justify="flex-end">

但是我将不得不使用另一个<Grid item />。看起来工作量太大了。

或者也许我最好还是使用普通的旧 CSS，弄乱float: right 并处理元素明显的零高度。

【参考方案1】：

如果你不想使用 Grid 组件，你必须依赖 CSS。

但如果你使用 Material-UI，你应该使用 JSS (CSS-IN-JS) 而不是纯 CSS。

简介：https://material-ui.com/customization/css-in-js/ 好处：http://cssinjs.org/benefits

例如，在 CSS 中，您可以使用任何这些解决方案。 “文本对齐”是最简单的一种。

text-align: right float: right 弹性盒 父级：display: flex 孩子：align-content: flex-end

【参考方案2】：

Material UI 的 Grid 组件有帮助道具来实现这一点。

<Grid align-items-xs-center justify-xs-flex-end>
 <Button>Click me</Button>
</Grid>

您可以找到文档here。

【讨论】：

可能在旧版本中，并没有回答问题

【参考方案3】：

在 MUI 5 之前：

试试这个

<Grid container justify="flex-end">
     <Button>Example</Button>
</Grid>

更新 MUI 5：（感谢 Dipak）

ForwardRef(Grid) 的属性 justify 已弃用。改用justifyContent，道具被重命名了。

<Grid container justifyContent="flex-end">
     <Button>Example</Button>
</Grid>

更新：最好的解决方案是 NearHuscarl 的答案，你最好使用 Stack 而不是 Grid。

【讨论】：

如果容器 Grid 中有两个 Grid 项，我只想对齐第二个呢？

然后你将你的项目转换成一个容器（一个网格可以是两者）所以你的项目将是这样的：跨度>

【参考方案4】：

将 Box 组件与 flex 结合使用。

<Box display="flex" flexDirection="column" >
  <... other stuff/>
</Box>

您可以了解更多here

【参考方案5】：

对于最新的 material-ui 版本 5 使用 justifyContent="flex-end" 或 alignContent 相当于 css text-align 和 flex-end=right

    <Grid container alignContent="flex-end">
         <Button>Example</Button>
    </Grid>

or
    <Grid item justifyContent="flex-end">
         <Button>Example</Button>
    </Grid>

对于旧的 material-ui 版本 4

    <Grid item justify="flex-end">
         <Button>Example</Button>
    </Grid>

【讨论】：

只有v4.11.4 可以使用<Grid container justify="flex-end">。你的例子不适合我。

谢谢，它对我有用，可以节省我的时间。

你能指定版本而不是“最新”[在撰写本文时]和“旧”吗？

【参考方案6】：

在MUI v5中，您可以使用Stack 在一行或一列上显示一组组件。 Stack 是一个 flexbox，所以你只需要设置 justifyContent 属性来对齐里面的项目：

<Stack direction="row" justifyContent="end">
  <Button variant="contained">Item 1</Button>
</Stack>

【参考方案7】：

如果您想对齐 <Grid item> 中的项目，您可以使用包装 Box 组件，如下所示：

<Grid container>
  <Grid item sm=6>
    <Box display="flex" justifyContent="flex-end">
      <Button>Button Aligned To The Right</Button>
    </Box>
  </Grid>
</Grid>

有关更多定位选项，请参阅docs。