在 MUI 5 之前：

试试这个

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

更新 MUI 5：（感谢 Dipak）

该propsjustify的ForwardRef(Grid)已被弃用。justifyContent改为使用，props被重命名。

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

如果不想使用 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

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

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

使用带有 flex 的 Box 组件。

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

你可以在这里了解更多