使用makestyles @mui时，类型'string'上不存在属性''答案

【问题标题】：Property '' does not exist on type 'string' when using makestyles @mui使用makestyles @mui时，类型'string'上不存在属性''
【发布时间】：2022-01-02 08:19:56
【问题描述】：

我有以下代码：

    const useStyles = makeStyles(() => ({
  dialog: {
    root: {
      position: 'absolute'
    },
    backdrop: {
      position: 'absolute'
    },
    paperScrollPaper: {
      overflow: 'visible'
    },
    paper: {
      background: 'none',
      boxShadow: 'none',
      overflow: 'hidden'
    }
  },
}))
    
export const LoadingBackdrop = (props: any) => {
  const classes = useStyles()
  const backdropProps = {
    disableEscapeKeyDown: true,
    disableAutoFocus: true,
    disableEnforceFocus: true,
    disableScrollLock: true,
    disablePortal: true,
  }
  return (
    <Dialog
      {...backdropProps}
      fullWidth
      className={classes.dialog.root}
      classes={{
        paperScrollPaper: classes.dialog.paperScrollPaper,
        paper: classes.dialog.paper,
        paperFullWidth: classes.dialog.paper
      }}
      BackdropProps={{
        classes: { root: classes.dialog.backdrop }
      }}
      style={{ position: 'absolute' }}
      {...props}
    >
      <Loading />
    </Dialog>
  )
}

在 LoadingBackDrop 组件中，我从 ts eslint 收到以下错误：

类型'string'.ts(2339)上不存在属性'root'

classes.dialog 的其他用途也是如此，只是更改了属性的名称...

如何注释或键入 makestyles 函数（或钩子调用）来修复此错误？

【问题讨论】：

标签： reactjs typescript react-hooks material-ui

【解决方案1】：

您不能按照自己的方式嵌套样式 - 它们必须是一层深度。例如：

const useStyles = makeStyles(() => ({
  root: {
    position: 'absolute'
  },
  backdrop: {
    position: 'absolute'
  },
  paperScrollPaper: {
    overflow: 'visible'
  },
  paper: {
    background: 'none',
    boxShadow: 'none',
    overflow: 'hidden'
  }
}))

还有：

<Dialog
  {...backdropProps}
  fullWidth
  className={classes.root}
  ...

他们的Styles documentation 有更多例子。

【讨论】：

就是这样！谢谢