javascript - Hur kan jag ändra typerna för Material UI alert-komponenten?

Jag är relativt ny på Typescript och jag har skapat en snackbar-komponent med React Context, och när jag försöker sätta Alert-severity får jag detta felmeddelande: "Type 'string' is not assignable to type 'Color | undefined'." Jag har typen satt till en sträng, men jag kan inte tycka ut hur jag ska ge den typen Color. Här är min Alert-komponent:

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;

Här är mina Alert-proptyper:

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

Jag hoppas att jag var tillräckligt specifik eftersom jag fortfarande håller på att förstå TS.

Svar #1

Allvaret av Material-ui-varningar kan vara av en av fyra typer 'error' | 'info' | 'success' | 'warning' enligt dokumentationen material-ui.com/api/alert. Problemet du har uppstår eftersom egenskapen severity i din Alert-komponent har tilldelats ett undefined-värde från din alertContext.snackbarType. För att undvika fel om något går fel, vore det god praxis att sätta en standardtyp för allvarlighet enligt följande:

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

Svar #2

Jag stötte precis på samma problem och löste det genom att importera typen från @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>
    )

}