'MUI - How to get theme.mixins.toolbar.minHeight value responsively?

I wonder how to use mui's theme.mixins.toolbar to calculate height: calc(100vh - toolbar)?

I am currently trying to do

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;

But when I change viewport size and the toolbar becomes bigger. Theme.mixins.toolbar.minHeight stays the same at 56 instead of expected 64?

javascriptcssreactjsmaterial-uitoolbar


Solution 1:[1]

So I found out you can just add a second empty Toolbar to act as the padding for your content if your main Toolbar position is fixed. It comes automatically with the same media queries as the main Toolbar.

Solution 2:[2]

If you make this {...theme.mixins.toolbar} you will get the minHeight responsively.
So I used this in Box component that I placed above to simulate paddingTop.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rolam
Solution 2 George Stoilov

Related Questions