CODEWITHSUNDEEP
cssreactjsmaterial-ui
David Cohen
David Cohen

Reputation: 275

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?

Upvotes: 26

Views: 35166

Answers (4)

Ginyao
Ginyao

Reputation: 11

i am now using Material UI and v5.14,

just set the height of the element which in the drawer is ok to me

   <Drawer
    anchor="bottom"
    open={open}
    onClose={() => setOpen(false)}
  >
    <div style={{height:"calc(100vh - 64px)"}}></div>
  </Drawer>

Upvotes: 0

FamilFrost
FamilFrost

Reputation: 91

For newer versions of Drawer in mui, you can do something like this by passing this prop

      <Drawer
        PaperProps={{
          sx: {
            height: 'calc(100% - 64px)',
            top: 64,
          },
        }}
      >

Upvotes: 9

Sergiy Seletskyy
Sergiy Seletskyy

Reputation: 17190

containerStyle is prohibited in version 1.0 and above

So you need to use props classes instead

Here is an example to this nontrivial case

import {withStyles, createStyleSheet} from 'material-ui/styles'
const styleSheet = createStyleSheet({
  paper: {
    height: 'calc(100% - 64px)',
    top: 64
  }
})
class CustomDrawer extends Component {
  ...
  render () {
    const classes = this.props.classes
    return (
      <Drawer
        classes={{paper: classes.paper}}
      >
      ...
    )
}

CustomDrawer.propTypes = {
  classes: PropTypes.object.isRequired
}

export default withStyles(styleSheet)(CustomDrawer)

Upvotes: 13

Matt
Matt

Reputation: 3780

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>

Upvotes: 59

Related Questions