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

Question

I'm trying to position the button exactly at the center bottom of the page irrespective of the content height in that page.

Excerpt from my code

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

I created a working example using CodeSandbox . Could anyone please help?

Answer 1

This is more css related ( see other post ) but you as you manually set the width of the Button you can position it 50% from the left and then subtracting half of its width from its left margin:

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

see exemple