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

Question

我对 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。

Answer 1

根据文档

material-ui.com/api/alert

，Material-ui 警报的严重性可以是四种类型 'error' | 'info' | 'success' | 'warning' 之一。您遇到的问题是因为您的

Alert

组件的严重性属性已从您的

undefined

分配了

alertContext.snackbarType

值。为了避免出现问题时出现错误，最好设置默认严重性类型，如下所示：

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

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>
    )

}

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>

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

Answer 4

我尝试替换 sx={{ successity:

${alertText.severity}

}} 并且成功了！