Блог

Я пытаюсь создать clipped under the app bar стиль временного ящика. Но, похоже, я не могу установить индекс z во временном ящике.

Временный ящик в material-ui имеет z-индекс modal компонента, который 1300 соответствует упомянутому в проблеме, которую я поднял здесьhttps://github.com/mui-org/material-ui/issues/22562.

Итак, если я использую подход, приведенный в документации по настройке zIndex панели приложений на theme.zIndex.modal 1 , я могу получить эффект «обрезанный под панелью приложений`. Но это также означало бы, что моя панель приложений будет выше всех моих модальностей. Это не то, чего я хочу.

Итак, я хотел установить для моего временного ящика значение z-index of 1250 , а для z-index моей панели приложений значение 1251 , чтобы получить желаемый эффект без каких-либо побочных эффектов.

Я пытаюсь установить zIndex с makeStyles помощью hook, как вы можете видеть в изолированной среде, а также в приведенном ниже фрагменте:

 const useStyles = makeStyles((theme) => ({
  appBar: {
    zIndex: 1251
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
    zIndex: 1250
  },
  drawerPaper: {
    width: drawerWidth
  }
}));
  

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

 <Drawer
  className={classes.drawer}
  open={true}
  classes={{
    paper: classes.drawerPaper
  }}
>
   .
   .
   .
</Drawer>
  

codesandbox:https://codesandbox.io/s/material-demo-forked-rq1fj?file=/demo.js

Если вы не хотите использовать, important! вы можете переопределить zIndex либо с помощью Material-UI theme API, либо путем встраивания стилей.

 const theme = createMuiTheme({
  zIndex: {
    appBar: 1251,
    modal: 1250,
  }
});

...

<ThemeProvider theme={theme}>
  <Demo />
</ThemeProvider>,
  

Недостатком этого подхода является то, что стили применяются ко всем модальностям, поэтому ваши фактические модальности теперь находятся ниже AppBar , что может быть не тем, что вы хотите.

Второй подход заключается во встроенном стиле css путем передачи объекта styling в реквизитах стиля вашего компонента

 <AppBar
  className={classes.appBar}
  style={{ zIndex: 1251 }}
>
</AppBar>
<Drawer
  className={classes.drawer}
  style={{ zIndex: 1250 }}
>
  

Живая демонстрация

Ваш z-index: 1250 переопределяется встроенным z-index: 1300 , добавленным material-ui. Вы можете переопределить этот встроенный стиль, добавив его !important в свой пользовательский z-index .

 const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex"
  },
  appBar: {
    zIndex: 1251
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
    zIndex: "1250 !important"
  },
  ...
}));