javascript - Hvordan kan jeg endre typene for Material UI alert-komponenten?

Jeg er relativt ny med Typescript og jeg har laget en snackbar-komponent ved å bruke React Context, og når jeg prøver å sette Alert-severity, får jeg denne feilen "Type 'string' kan ikke tilordnes typen 'Color | undefined'." Jeg har satt typen til en streng, men jeg klarer ikke å finne ut hvordan jeg kan gi den typen Color. Her er 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;

Her er mine Alert-proptyper:

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

Jeg håper jeg var spesifikk nok, ettersom jeg fortsatt jobber med å forstå TS.

Svar #1

Alvoret av Material-ui-varsler kan være av en av fire typer 'error' | 'info' | 'success' | 'warning' i henhold til dokumentasjonen material-ui.com/api/alert. Problemet du har oppstår fordi egenskapen severity til din Alert-komponent har fått tildelt en undefined-verdi fra din alertContext.snackbarType. For å unngå feil hvis noe går galt, vil det være god praksis å sette en standard severity-type som følger:

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

Svar #2

Jeg støtte akkurat på det samme problemet og løste det ved å importere typen fra @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>
    )

}