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

【问题标题】：Align button to the bottom of the page using MUI v5 in React在 React 中使用 MUI v5 将按钮对齐到页面底部
【发布时间】：2021-11-02 19:32:52
【问题描述】：

我正在尝试将按钮准确定位在页面的中心底部，而与该页面中的内容高度无关。

摘自我的代码

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 创建了一个工作示例。有人可以帮忙吗？

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

这与 css 更相关 (see other post)，但是当您手动设置 Button 的宽度时，您可以将其定位在距左侧 50% 的位置，然后从其左边距中减去其宽度的一半：

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

see exemple

【讨论】：