Reactjs Пользовательский интерфейс материала, как установить более низкий z-индекс для компонента Dialog

Question

У меня есть компонент «Полноэкранный диалог с материальным пользовательским интерфейсом», но мне нужно, чтобы он был z-index = 7. В моем инспекторе элементов браузера у меня есть следующее:

and as you can see its z-index = 1300. This is the code of the Dialog:

return (
    
      
        
          
            Dialog Title
          
            Close
        
        
          Here I have the dialog content
        
      
    
  );

the above code comes from https://material-ui.com/components/dialogs/ полноэкранный диалог.

Решение, которое я пытаюсь найти, исходит отсюда: https://material-ui.com/customization/components/#overriding -styles-with-global-class-names

и это:

const StyledDialog = withStyles({
  root: {
    position: 'fixed',
    zIndex: 7,
    right: '0px',
    bottom: '0px',
    top: '0px',
    left: '0px'
  }
})(Dialog);

...

return (
    <StyledDialog fullScreen open onClose={handleClose} TransitionComponent={Transition}>
       ...
    </StyledDialog>
)

, но результат остается тем же: z-index = 1300. Затем я попробовал этот другой из https://material-ui.com/customization/components/#overriding -with-inline-styles :

<Dialog fullScreen open onClose={handleClose} TransitionComponent={Transition} style={{
    position: 'fixed',
    zIndex: 7,
    right: '0px',
    bottom: '0px',
    top: '0px',
    left: '0px'
  }}>
       ...
    </Dialog>

И ничего нового. Мне нужно изменить z-index этого диалога с 1300 на 7, но я не могу понять, как это сделать. Что мне здесь не хватает?

Answer 1

z-index: 1300 устанавливается встроенным, а встроенные стили имеют более высокий приоритет. Вы должны использовать !important на своем z-index.

const StyledDialog = withStyles({
  root: {
    position: 'fixed',
    zIndex: '7 !important',
    right: '0px',
    bottom: '0px',
    top: '0px',
    left: '0px'
  }
})(Dialog);

Answer 2

Вы можете посмотреть здесь

https://material-ui.com/customization/default-theme/?expand-path= $. ZIndex

Просто имейте в виду, что это переопределит полную тему, что означает все диалоги после этого будет 7

Надежда, которая направит вас в правильном направлении!

Удачи!