Typescript 3.7.2、React 和 Material UI 4.5.1 Snackbars - 尝试弹出错误但得到样式错误

Posted 2023-02-23

【中文标题】Typescript 3.7.2、React 和 Material UI 4.5.1 Snackbars - 尝试弹出错误但得到样式错误

【英文标题】：Typescript 3.7.2, React and Material UI 4.5.1 Snackbars - trying to do an error popup but get styles errors

【发布时间】：2020-04-25 14:13:11

【问题描述】：

我正在尝试使用材料 UI 快餐栏来显示我的反应应用程序中的弹出错误。

我正在使用容器视图。在这种情况下，它会做一些事情并且可能会引发错误。如果确实出现错误，我想渲染我的自定义小吃栏组件。

这是我的 ErrorPopup 组件：

import React from 'react';
import  Snackbar  from '@material-ui/core';
import MuiAlert,  AlertProps  from '@material-ui/lab/Alert';

function Alert(props: AlertProps) 
  return <MuiAlert elevation=6 variant="filled" ...props />;


interface ErrorProps 
  message: string;


export default function ErrorPopup(props: ErrorProps) 
  const [open, setOpen] = React.useState(true);

  const handleClose = () => 
    setOpen(false);
  ;

  return (
    <div>
      props.message !== '' ? (
        <Snackbar open=open autoHideDuration=6000 onClose=handleClose>
          <Alert onClose=handleClose color="error">
            props.message
          </Alert>
        </Snackbar>
      ) : (
        ''
      )
    </div>
  );

在我的主视图中，我这样称呼这个组件：

<ErrorPopup message=this.state.errors />

似乎发生的事情是我收到的错误似乎表明WithStyles + typescript issue 突然出现，但我无法完全理解正在发生的事情。我只是希望它能够正常工作，因为到目前为止我的所有材料 UI 内容都已正常工作。

我已经尝试了几个快速剪切 n 粘贴运行 n 枪类型的网络修复（就像你一样），但我显然不知道到底发生了什么，所以我至少需要从那里开始。

这是一个屏幕截图：

With styles errors perhaps?

首先，这种显示错误的方法可以吗？ 其次，谁能在这里指出我正确的方向？

【参考方案1】：

令人沮丧的是，我刚刚在我的项目上运行了一个 npm 更新，事情就开始起作用了。 供任何人参考，我在 package.json 中的依赖项

    "dependencies": 
        "@material-ui/core": "^4.8.3",
        "@material-ui/icons": "^4.5.1",
        "@material-ui/lab": "^4.0.0-alpha.39",
        "@types/pouchdb": "^6.4.0",
        "@types/react-router-dom": "^5.1.3",
        "clsx": "^1.0.4",
        "highcharts": "^7.2.1",
        "highcharts-react-official": "^2.2.2",
        "pouchdb": "^7.1.1",
        "pouchdb-find": "^7.1.1",
        "pubnub": "^4.27.3",
        "react": "^16.12.0",
        "react-dom": "^16.12.0",
        "react-router-dom": "^5.1.2",
        "react-scripts": "^3.3.0",
        "request": "^2.88.0",
        "typescript": "^3.7.4"
    ,

虽然这解决了我最初的问题，但这是正确的方法吗？

干杯