Me pregunto cómo usar theme.mixins.toolbar de mui para calcular la height: calc(100vh - toolbar) ?
actualmente estoy tratando de hacer
function SwipeCard() { return ( <Box sx={{ height: (theme) => `calc(100vh - ${theme.mixins.toolbar.minHeight}px)`, paddingTop: (theme) => theme.mixins.toolbar.minHeight + "px", }} > hello world </Box> ); } export default SwipeCard; Pero cuando cambio el tamaño de la ventana gráfica y la barra de herramientas se vuelve más grande. Theme.mixins.toolbar.minHeight permanece igual en 56 en lugar de los 64 esperados.
Así que descubrí que puede agregar una segunda barra de Toolbar vacía para que actúe como relleno para su contenido si la main Toolbar position is fixed . Viene automáticamente con las mismas media queries que la barra de Toolbar principal.
Si creas este {...theme.mixins.toolbar} obtendrás el minHeight de manera receptiva.
Así que usé esto en el componente Box que coloqué arriba para simular paddingTop.