Доступ к компонентам пользовательского интерфейса материала возможен через боковое меню - PullRequest
0 голосов
/ 13 января 2020

Я создаю боковое меню, и у меня возникает проблема с доступом к компонентам 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;
`

Как мне решить эту проблему?

...