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

Question

我正在尝试使用 material UI 快餐栏在我的 React 应用程序中显示弹出错误。

我正在使用容器视图。在那个视图中，它做了一些事情并且可以抛出错误。如果确实出现错误，我想呈现我的自定义小吃栏组件。

这是我的 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，但我无法完全理解正在发生的事情。我只是希望它能正常工作，因为我所有的 material UI 东西到目前为止都在工作。

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

这是一个屏幕截图：

With styles errors perhaps?

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

Answer 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"
    },

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

干杯

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

typescript

reactjs

snackbar

material-ui