在React中使用MUI v5将按钮固定到页面底部居中位置

你需要调整按钮的定位规则和居中逻辑，具体修改点如下：

• 将按钮的定位属性从absolute改为fixed，fixed是相对于浏览器视口定位，不会受页面内容高度、页面滚动的影响，始终固定在视口对应位置
• 删除原有right: 0配置，新增left: 0、right: 0、margin: 0 auto实现水平居中，可根据视觉需要调整bottom值，避免按钮完全贴靠底部

修改后完整代码如下：

const useStyles = makeStyles({
  button: {
    bottom: 16, // 单位为px，设为0就是完全贴合视口底部
    left: 0,
    right: 0,
    margin: "0 auto",
    position: "fixed"
  }
});

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>
  );
}

如果你不需要按钮始终悬浮在视口底部，而是希望按钮固定在整个页面文档的最底部：内容高度不足视口时显示在视口底部，内容高度超过视口时需要滚动到页面最底部才能看到，可以使用flex布局实现，不需要固定定位：

const useStyles = makeStyles({
  root: {
    minHeight: "100vh",
    display: "flex",
    flexDirection: "column",
    justifyContent: "space-between"
  },
  button: {
    width: "200px",
    margin: "16px auto"
  }
});

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

内容的提问来源于stack exchange，提问作者krsna