如何使用 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>

更新材质 UI 5：（感谢 Dipak）

justify

的属性

ForwardRef(Grid)

已弃用。使用

justifyContent

代替，该道具已重命名。

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

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

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>

请参阅文档了解更多定位选项。

Answer 3

在 Material UI v5 中，您可以使用

Stack

在行或列上显示一组组件。

Stack

是一个弹性盒子，所以你只需要设置

justifyContent

属性来对齐里面的项目：

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

Answer 4

将 Box 组件与 flex 一起使用。

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

您可以了解更多这里

Answer 5

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

Answer 6

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

Answer 7

对于最新的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>

对于旧材料-ui版本4

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

Answer 8

由于这个问题没有针对 Grid 指定，这里有一个更通用的答案：

还有其他组件需要在 sx 中提供参数。

<Toolbar sx={{ justifyContent: 'flex-end' }}>

Answer 9

对我来说，下面的代码适用于 MUIv5

<Grid container>
 <Grid item justifyItems="end">
  <Button>Click me</Button>
 </Grid>
</Grid>

Answer 10

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

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

您可以在此处找到文档。