How to set the width of Material UI drawer

user_5288074 0
Viewed 5161

I am trying to use material UI drawer by anchoring it to top, its working ok, but only thing is i am not able to change the width of the drawer, its taking full width of the page. I tried to update the width in css like

 list: {
    width: 250.   //tried to update it to 100, but its not taking
  },

codesandbox How to update width?

material-ui reactjs css javascript
4 Answers

It's the Drawer paper you've to change.

const useStyles = makeStyles({
  paper: {
    width: 250
  }
});

<Drawer
  anchor={anchor}
  open={state[anchor]}
  onClose={toggleDrawer(anchor, false)}
  classes={{ paper: classes.paper }}
>

Edit Material demo (forked)

user_86808050

For MUI version 5, you have to use the PaperProps prop like so:

<Drawer
  PaperProps={{
    sx: { width: "90%" },
  }}
>
  /* ...child elements */
</Drawer>
user_79222540

Inline styling also can be written as follows when required.

const useStyles = makeStyles({
  
});

<Drawer
  anchor={anchor}
  open={state[anchor]}
  onClose={toggleDrawer(anchor, false)}
  style={{ width : "100px"}}
>
user_137113370

The Drawer takes the width of the inner most element.

const useStyle = makeStyles({
 list: {
    width: 150
  }
});

<Drawer>
   <Container className={classes.list} /> 
</Drawer>
user_77588180
Related