Estoy tratando de colocar el botón exactamente en la parte inferior central de la página, independientemente de la altura del contenido de esa página.
Extracto de mi código
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> ); }Creé un ejemplo de trabajo usando CodeSandbox . ¿Alguien podría ayudar?
Esto está más relacionado con css ( ver otra publicación ), pero al configurar manualmente el ancho del Button , puede colocarlo 50% desde la izquierda y luego restar la mitad de su ancho de su margen izquierdo:
bottom: 0, left: "50%", marginLeft: -100, position: "absolute"