javascript - 如何使用 Material UI 将组件居中/右对齐？

Question

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

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

<Grid container justify="flex-end">

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

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

Answer 1

Material UI 5 之前:

试试这个

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

更新 Material UI 5:(感谢 Dipak)

The prop justify of ForwardRef(Grid) is deprecated. Use justifyContent instead, the prop was renamed.

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

更新:最好的解决方案是 NearHuscarl 或 Eduardo Oviedo Blanco 的答案，您宁愿使用 Stack 或 Box 而不是 Grid。