!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 :{

    color:'blue !important',

    backgroundColor: 'green !important',

    zIndex: `${index} !important`

}