CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
Lara
Lara

Reputation: 3021

How to set the width of Material UI drawer

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?

Upvotes: 7

Views: 13274

Answers (4)

Frederic Eid
Frederic Eid

Reputation: 641

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

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

Upvotes: 12

Paul Trimor
Paul Trimor

Reputation: 340

The Drawer takes the width of the inner most element.

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

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

Upvotes: 0

Vidumini Kulathunga
Vidumini Kulathunga

Reputation: 81

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"}}
>

Upvotes: 0

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

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)

Upvotes: 9

Related Questions