在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或Eduardo奥维耶多布兰科的答案，您宁愿使用堆栈或框而不是网格。

如果要对齐<Grid item>内的项目，可使用 Package Box组件，如下所示：

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

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

在MUI v5中，您可以使用Stack在行或列上显示一组组件。Stack是一个弹性框，因此您只需设置justifyContent属性以对齐内部的项目：

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

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

将长方体构件与柔体一起使用。

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

您可以了解更多here

<Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
                <Typography sx={{ fontWeight: 600 }}>
                    Recent Repositories
                </Typography>
                <Box>
                    {/* <Typography></Typography> */}
                    <Button error>+ New</Button>
                </Box>
            </Toolbar>

对于最新的material-ui版本5使用justifyContent=“flex-end”或alignContent，这相当于css文本对齐和flex-end=右对齐

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

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

适用于旧材质-ui版本4

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

材质UI的网格组件有辅助 prop 来实现这一点。

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

你可以在这里找到医生。