David Cohen David Cohen - 1 month ago 31
React JSX Question

material-ui change the height of the drawer

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?

Answer

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>