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

Question

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

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

 <Grid container justify="flex-end">

但那时我将不得不使用另一个 <Grid item /> 。似乎工作量太大了。

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

原文由 Vedant Agarwala 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 MUI 5 之前：

尝试这个

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

更新 MUI 5：（感谢 Dipak）

justify 的 ForwardRef(Grid) 已弃用。使用 justifyContent 代替，该道具已重命名。

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

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

原文由 ThomasP1988 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您想对齐 <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>

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

原文由 andromeda 发布，翻译遵循 CC BY-SA 4.0 许可协议