如何在打字稿中添加 zIndex

Question

**嗨，所以我认为 Vercel 正在覆盖我的 css，它在本地工作得很好，但有些样式在 Vercel Env 上一次没有应用。所以当我应用 !important 时背景颜色起作用了。我现在正在尝试在 zIndex 上应用相同的方法，但它不起作用。请协助**

类型“${number} !important”不可分配给类型“ZIndexProperty | PropsFunc unknown, ZIndexProperty>'. 类型“字符串”不可分配给类型“ZIndexProperty | PropsFunc unknown, ZIndexProperty>'. 类型“${number} !important”不可分配给类型“自动”。 类型 'string' 不可分配给类型 '"auto"'

const drawerWidth = 280;
const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      display: 'flex'
    },
    appBar: {
      zIndex: `${theme.zIndex.drawer + 1} !important`,
      transition: theme.transitions.create(['width', 'margin'], {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen
      }),
      backgroundColor: `${theme.palette.secondary.contrastText} !important`,
      height: 80,
      paddingTop: theme.spacing(2),
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center'
    },```

Answer 1

为什么要使用 !Important ？ 试着这样问：

import {makeStyles, Theme} from '@material-ui/core';

export const useStyles = makeStyles((theme: Theme) => ({
  appbar: {
    zIndex: theme.zIndex.drawer + 1,
  },
}));

并使用：

import { AppBar as MuiAppBar, Toolbar } from '@material-ui/core';
import { useStyles } from "./Appbar.styles";

const Appbar: FC = ({ children }) => {

  const classes = useStyles()

  return (
    <MuiAppBar position="fixed" className={classes.appbar}>
      <Toolbar>{children}</Toolbar>
    </MuiAppBar>
  );
};


export default Appbar;