Material-ui: AppBar position="fixed" shouldn't require a shim

[StokeMasterJack]

In order to make the AppBar (position=static) work in the least surprising way a shim is required:

<AppBar position="static">...</AppBar>
<div style={{height: 64}}>Shim - Not visible</div>
<List>...</List>

[oliviertassinari]

@StokeMasterJack I believed you meant fixed in the example.

There are different solutions to this problem:

• you can use the sticky position (non supported by IE 11):

<AppBar position="sticky" />

• you can use a second static app bar as a shim:

<AppBar position="fixed" />
<Toolbar />
// The body...

• you can use this mixin to apply the style to a different element:
  https://github.com/mui-org/material-ui/blob/a88a405eaf4e57fb2ff8cb88599ecaf31e786b77/src/styles/createMixins.js#L17-L25.

P.S. the height of the AppBar is dynamic, it changes with the screen width.

[vuhrmeister]

@oliviertassinari Regarding your second solution to use a second static AppBar: is it supposed to be working as you wrote? Because currently this is not working since children is required: https://github.com/mui-org/material-ui/blob/v1-beta/src/AppBar/AppBar.js#L83

Using it that way it throws an error (as expected):

Warning: Failed prop type: The prop `children` is marked as required in `AppBar`, but its value is `undefined`.

[oliviertassinari]

@vuhrmeister You can use a Toolbar instead.

[vuhrmeister]

Thx, just figured that out.

[vuhrmeister]

btw (and sorry, bit off-topic): why is Toolbar a separate component when it's only used in the context of AppBar?

[oliviertassinari]

@vuhrmeister For the separation of responsibilities. I can be used outside of the AppBar context.

[aprilmintacpineda]

Isn't there any way we can get the height current height of the topbar on our styles?

This is what I want to achieve

export default theme => {
  return {
    container: {
      height: `calc(100vh - ${theme.topbar.height})`
    }
  };
};

[first-click]

@aprilmintacpineda Here is my solution. I used the values from the mixin (see https://github.com/mui-org/material-ui/issues/10076#issuecomment-361232810 in this thread). I hope this helps.

const useStyles = makeStyles(theme => {
  return {
    main: {
      flexGrow: 1,
      height: 'calc(100vh - 56px)',
      [`${theme.breakpoints.up('xs')} and (orientation: landscape)`]: {
        height: 'calc(100vh - 48px)'
      },
      [theme.breakpoints.up('sm')]: {
        height: 'calc(100vh - 64px)'
      }
    }
  };
});