如何更改 Material UI 警告框组件的类型？

Question

我对Typescript比较新，我使用React Context创建了一个snackbar组件，但是当我尝试设置Alert的严重性时，出现了这个错误：“类型“string”不能分配给类型“Color | undefined”。” 虽然我将类型设置为字符串，但我似乎无法弄清如何将其赋予颜色类型。

这是我的Alert组件：

const AppAlert = () => {
  const alertContext = useContext(AlertContext);

  return (
    <div>
      <Snackbar open={alertContext.snackbarOpen}>
        <Alert severity={alertContext.snackbarType} variant="filled">
          {alertContext.snackbarMessage}
        </Alert>
      </Snackbar>
    </div>
  );
};

export default AppAlert;

以下是我的警告提示 prop 类型:

interface AlertProps {
  snackbarOpen: boolean;
  snackbarType: string;
  snackbarMessage: string;
  setAlert: (type: string, message: string) => void;
}

我希望自己表述得足够清楚，因为我仍在努力理解TS。

- codeEagle123

---

请查看警报组件的文档。请注意，严重性仅限于几个不同的字符串，'error' | 'info' | 'success' | 'warning'：https://material-ui.com/api/alert/ - Evan Trimboli

谢谢！我只需要将类型限制为那些字符串，就让它正常工作了。 - codeEagle123

Answer 1

Material-ui警报的严重程度根据文档material-ui.com/api/alert可分为四种类型：'error' | 'info' | 'success' | 'warning'。你遇到的问题是由于Alert组件的severity属性被赋予了一个来自alertContext.snackbarType的undefined值。为了避免出现错误，如果发生了什么问题，最好将默认的严重程度类型设置如下：

<Alert severity={alertContext?.snackbarType || 'warning'} variant="filled">
    {alertContext?.snackbarMessage}
</Alert>

- Muller Roufaou

Answer 2

我遇到了同样的问题，并通过从@material-ui/lab/Alert导入类型来解决它：

import React from 'react';
import Alert from '@material-ui/lab/Alert';
import type { Color } from '@material-ui/lab/Alert'

interface Props{
    severity: Color,
    message: string
}

export const BuildReportAlert = (props: Props) => {

    const {severity, message} = props;

    return (
        <Alert
            variant='outlined'
            severity={severity}
        >
            {message}
        </Alert>
    )

}

- Towerss

Answer 3

你可以使用 React 的 useState，创建一个对象来存储严重程度和消息。

const [errorDetail, setErrorDetail] = useState({
    severity: "error",
    message: "This is an info alert — check it out!",
  }); 

而 Mui 组件如下。

<Alert severity={errorDetail.severity}>{errorDetail.message}</Alert>

它可以正常工作，您可以在需要时修改严重性和消息。

- Shrip