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

user_5328827 0
Viewed 685

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?

material-ui reactjs toolbar css javascript
2 Answers

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.

user_53288270

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.

user_26860850
Related