React Material-UI Cookbook

There's more...

When the screen in this example first loads, some of the content is hidden behind the AppBar component. This is because the position is fixed and it has a higher z-index value than the regular content. This is expected, so that when you scroll, the regular content goes behind the AppBar component. The solution is to add a top margin to your content. The problem is that you don't necessarily know the height of the AppBar.

You could just set a value that looks good. A better solution is to use the toolbar mixin styles. You can access this mixin object by making styles a function that returns an object. Then, you'll have access to the theme argument, which has a toolbar mixin object.

Here's what styles should be changed to: