在 React 中使用 MUI v5 将按钮对齐到页面底部

Question

我试图将按钮准确地定位在页面的中心底部，而不管该页面中的内容高度如何。

摘自我的代码

const useStyles = makeStyles({
  button: {
    bottom: 0,
    right: 0,
    position: "absolute"
  }
});

export default function Home() {
  const classes = useStyles();
  return (
    <div>
      <Box>
        <Box>
          <Paper elevation={2} sx={{ width: "100%", height: "50vh" }}>
            Some data
          </Paper>
        </Box>
        <Box textAlign="center">
          <Button
            className={classes.button}
            variant="contained"
            sx={{ width: "200px" }}
          >
            Submit
          </Button>
        </Box>
      </Box>
    </div>
  );
}

我使用CodeSandbox创建了一个工作示例。 有人可以帮忙吗？

Answer 1

这与 css 相关（请参阅其他帖子），但是当您手动设置Button的宽度时，您可以将其从左侧定位 50%，然后从其左边距减去其宽度的一半：

bottom: 0,
left: "50%",
marginLeft: -100,
position: "absolute"

见例子