!makeStyle 很重要

Question

我正在尝试在对话框上显示小吃栏。我的对话框的 zIndex 为 1500，它一定是这个。我的小吃栏是一个使用 MaterialUI Snackbar 的自定义组件，它的 zIndex 自动为 1400，我想更改它，但我的方法不起作用。

const useContentStyles = makeStyles((theme: Theme) => ({

    containerRoot :{

        color:'blue !important',

        backgroundColor: 'green !important',

        zIndex: 1501,

    }

}))

const App: FunctionComponent = () => {

return (

        <>

          <SnackbarProvider maxSnack={4} anchorOrigin={{vertical: 'bottom', horizontal: 'center'}} classes={{containerRoot: classes.containerRoot}}>

                <SnackbarConsumer messageType={'error'} time={4000} />

                <SnackbarConsumer messageType={'success'} time={4000} />

                <SnackbarConsumer messageType={'info'} time={4000} />

                <SnackbarConsumer messageType={'warning'} time={4000} />

         </SnackbarProvider>;

       </>

     )

}

我的 zIndex 已应用，但我必须写 !important 才能使其工作，但我不能这样做：

const useContentStyles = makeStyles((theme: Theme) => ({

    containerRoot :{

        color:'blue !important',

        backgroundColor: 'green !important',

        zIndex: 1501 !important,

    }

}))

我能做些什么 ？

Answer 1

也许模板文字可能是一个解决方案。const index = 1501;containerRoot :{&nbsp; &nbsp; color:'blue !important',&nbsp; &nbsp; backgroundColor: 'green !important',&nbsp; &nbsp; zIndex: `${index} !important`}