Question

我正在创建一个侧面菜单，但存在通过单击侧面菜单上的Material-UI组件（可以单击复选框/可以在输入字段中键入复选框）的问题，方法是在侧面菜单中单击它们的位置。单击时，文本字段和日期输入的z-index甚至比我的侧菜单还要高，然后将其弹出。我的侧边菜单的z-index为4。我在index.js文件中创建了一个新的全局Material-UI主题，并将组件的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;
`

如何解决此问题？

可以通过侧面菜单访问材料UI组件

0 个答案: