如何更改材质 UI 警报组件的类型？

Posted 2023-02-22

【中文标题】如何更改材质 UI 警报组件的类型？

【英文标题】：How can I alter the types for material UI alert component?

【发布时间】：2021-08-03 08:14:54

【问题描述】：

我对 Typescript 比较陌生，我使用 React Context 创建了一个快餐栏组件，当我尝试设置警报严重性时，我收到此错误“类型'字符串'不可分配给类型'颜色|未定义'。”我确实将类型设置为字符串，但是，我似乎无法弄清楚如何给它一种颜色。 这是我的警报组件：

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;

这是我的警报道具类型：

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

我希望我足够具体，因为我仍在努力理解 TS。

【问题讨论】：

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

谢谢！我只需要将类型限制为这些字符串并让它工作。

【参考方案1】：

根据文档material-ui.com/api/alert，Material-ui 警报的严重性可以是四种类型之一'error' | 'info' | 'success' | 'warning'。您遇到的问题是因为您的Alert 组件的严重性属性已从您的alertContext.snackbarType 分配了一个undefined 值。为避免出现问题时出现错误，最好按如下方式设置默认严重性类型：

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

【参考方案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>
    )