Я создаю боковое меню, и у меня возникает проблема с доступом к компонентам Material-UI (флажок можно установить / ввести в поле ввода) через боковое меню, щелкнув место, где они расположены на странице. Текстовые поля и ввод данных при нажатии даже получают более высокий z-индекс, чем мое боковое меню, и всплывают над ним. У моего бокового меню z-индекс равен 4. Я создал новую глобальную тему Material-UI в моем индексе. js файл и установил z-index компонентов равным 1.
const theme = createMuiTheme({
zIndex : {
mobileStepper: 1,
speedDial: 1,
appBar: 1,
drawer: 1,
modal: 1,
snackbar: 1,
tooltip: 1
}
})
и передал его моему провайдеру тем.
ReactDOM.render(
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
, document.getElementById('root'));
Вот мои стили бокового меню
const MenuStyles = css`
background-color:rgba(255,255,255,0.9);
height: 100vh;
position: absolute;
top: 0;
right:0;
transition: transform 0.3s ease-in-out;
padding: 2rem;
padding-top:10vh;
z-index:4;
width:100%;
position:absolute;
`
Как мне решить эту проблему?