Ящики накрывают AppBar в Material-UI

Question

Я хочу, чтобы мой компонент ящика открывался ПОД Компонентом AppBar, а не закрывал его. Но это никогда не было неожиданно для этой новой версии @ Material-Ui / core.

Есть идеи, как мне это сделать?

В настоящее время он открывается таким образом, что охватывает AppBar. Это не то, что я хочу, я хочу, чтобы ящик открывался под компонентом appBar, как любое обычное приложение.

Вот мой код:

const styles = theme => ({


root: {
    flexGrow: 1,
  },
  flex: {
    flex: 1,
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
  list: {
      width: 250,
  },

});


class ClippedDrawer extends React.Component {
  constructor(props){
    super(props);
    this.state={
     open: false,     
    }
  }

  toggleDrawer(){
    this.setState({
      open: !this.state.open,
    });
  };

  render(){
    const { classes } = this.props;
    return(
        <div className={classes.root}>
          <AppBar position="relative" className={classes.appBar}>
            <Toolbar>
              <IconButton className={classes.menuButton} onClick={()=>this.toggleDrawer()} color="inherit" aria-label="Menu">
                <MenuIcon />
              </IconButton>
              <Typography variant="title" color="inherit" className={classes.flex}>
                Title
              </Typography>
              <Button color="inherit">Login</Button>
            </Toolbar>
          </AppBar>
          <Drawer className={classes.drawer} open={this.state.open} onClose={()=>this.toggleDrawer()}>
          <div
            tabIndex={0}
            role="button"
            onClick={()=>this.toggleDrawer()}
            onKeyDown={()=>this.toggleDrawer()}
          >
            <div className={classes.list}>
              <List>ola</List>
              <Divider />
              <List>xau</List>
            </div>
          </div>
        </Drawer>
        </div>
      );
    }
  }


ClippedDrawer.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ClippedDrawer);

Answer 1

Установите позицию панели приложений относительно:

appBar: {
    ...
    position: 'relative',
    zIndex: theme.zIndex.drawer + 1,
},

Если это не работает, вам также может понадобиться явно установить zIndex на 1400.

Answer 2

Вам необходимо установить свойство CSS z-index для класса appBar в стилях

    [theme.breakpoints.up("sm")]: {
      width: "100%"
    },
    zIndex: theme.zIndex.drawer + 1
  }

Этот класс appBar в классе по умолчанию для компонента AppBar В вашем случае может быть marginLeft для appBar и для theme.breakpoints.up ("sm") ширина может быть calc(100% - (drawerWidth)) замените его на ширину 100%

Надеюсь, это поможет

Answer 3

Вы можете установить абсолютную позицию панели приложения в своих стилях и наложить поле на Ящик, чтобы он находился в правильном положении.

Но посмотрите документы, там много примеров https://material -ui.com / demos / drawers /