Ящики накрывают 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 относительно:

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

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

Answer 2

Просто добавьте sx в панель приложений:

      <AppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>

это сработало для меня.

Answer 3

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

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

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

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

Answer 4

Если вы хотите, чтобы другие ящики работали нормально (над панелью приложений).

Вы можете установить этот конкретный z-индекс ящика ниже, чем панель приложений, а не наоборот.

          // drawer
    zIndex: theme.zIndex.appBar - 1,

вместо

          // appBar
    zIndex: theme.zIndex.drawer + 1,

Answer 5

Для меня добавление поддержки позиции в AppBar устранило проблему. Например.

<AppBar position="fixed" className={classes.appBar}>
</AppBar>

Answer 6

Я изо всех сил старался следовать всем вашим решениям, но тщетно. Ничего, кроме этого, мне не помогло: в ваших классах компонента Drawer, в paper: {background: "transparent"}, а затем, независимо от вашего содержимого в ящике, оберните его в Material-UI, установите его стили, чтобы он мог сдвигаться вниз на # пикселей как высоту вашего appBar. А затем оформьте его соответствующим образом. :)

Answer 7

Я столкнулся с этой проблемой также при использовании «следующей» (v5) версии Material-UI. Я посмотрел на пример ящика, вырезанного под панелью приложения, в документации к следующей версии, и между этим примером и моим собственным кодом было мало различий. Что решило эту проблему для меня, я использовал StyledEngineProviderвокруг моего компонента приложения. Как только я использовал это, мой ящик сразу же оказался под панелью приложений.

      import * as React from 'react';
import ReactDOM from 'react-dom';
import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
import App from './App';

ReactDOM.render(
  <StyledEngineProvider injectFirst>
    <App />
  </StyledEngineProvider>,
  document.querySelector("#root")
);

Answer 8

Для всех, кто ищет решение этой очень раздражающей проблемы (заголовок закрывает часть ящика), вот мое решение (наряду с zIndex) для ящиков с нефиксированным заголовком:

поместите пустой div с useRef () под заголовком, а затем ref.current.getBoundingClientRect().top при нажатии кнопки и передайте его в свой стиль ящика для paddingTop.

Это получает расстояние в пикселях от div от верхней части экрана в точке, где нажата кнопка, поэтому ящик всегда будет иметь правильное заполнение.

Answer 9

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

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