如何在Material-UI中更改抽屉的位置？

Question

Change the position of the drawer in material-ui

I am trying to apply paddingLeft styling to the drawer.

For some reason, My code is not working. Any chance anyone has any idea whats happening here?

  <Drawer
        containerStyle={{paddingLeft:50}}
        className="app-sidebar-content"
        variant={type}
        open={type.includes("temporary") ? navCollapsed : true}
        onClose={this.props.onToggleCollapsedNav}
        classes={{
          paper: "side-nav"
        }}
      >
        <UserInfo />

      </Drawer>

Answer 1

Using the modal element of the CSS API, you can achieve what you are looking for:

<Drawer
  open={xxx}
  onClose={yyy}
  classes={{
     paper: classes.paper,
     modal: classes.modal
  }}
>...</Drawer>

then

const styles = {
  modal: {
    paddingLeft: 50,
  },
}

Ref: https://material-ui-next.com/api/drawer/

Answer 2

Which version are you using?

With the latest version of material-ui, you can pass classes object and style the component hierarchy.

Hope this helps !