material-ui change the height of the drawer

Issue

I'm using react and material-ui in my project and I have come across a simple issue that I just dont't know how to solve. I want to create a drawer and set its height in a way that when it will open, it wont open over the app bar.

There is no parameter in the Drawer component for the height, I also tried to override its style and setting up the height on the style object like this :

<Drawer style={{height:'90%'}} />

But it didn't work.

The only way I can think of, is editing the code of the Drawer component, but ofcourse I want to avoid that.

Any idea on how I can define the height?

Solution

Here you go:

<Drawer open={this.state.open} containerStyle={{height: 'calc(100% - 64px)', top: 64}}>
  <MenuItem>Menu Item</MenuItem>
  <MenuItem>Menu Item 2</MenuItem>
</Drawer>

Answered By - Matt