Menu
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?
462
How to Change MUI Drawer Elevation. The elevation prop is a shorthand for box shadow styling. It is available on the MUI Box and Paper components. We can add elevation to the Drawer by passing an elevation prop to the Paper component rendered inside the Drawer component.
Just add PaperProps={{ style: { width: '25%' } }} to your MUI Drawer.
Material UI Drawer is the most widely used component of Material UI. Material UI Drawer is used as a navigation bar of the website which displays a list of items and then clicking on the item the user will be redirected to the specific part of the web page/website.
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
