I am relatively new to Typescript and I have created a snackbar ponent using React Context and when I try to set the Alert severity, I get this error "Type 'string' is not assignable to type 'Color | undefined'." I do have the type set to a string however, I cannot seem to figure out how to give it a type of Color. Here is my Alert ponent:

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;

Here are my Alert prop types:

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

I hope I was specific enough as I am still working on understanding TS.

I am relatively new to Typescript and I have created a snackbar ponent using React Context and when I try to set the Alert severity, I get this error "Type 'string' is not assignable to type 'Color | undefined'." I do have the type set to a string however, I cannot seem to figure out how to give it a type of Color. Here is my Alert ponent:

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;

Here are my Alert prop types:

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

I hope I was specific enough as I am still working on understanding TS.

• javascript
• reactjs
• typescript
• types
• material-ui

• Have a look at the docs for the alert ponent. See that severity is limited to a few different strings, 'error' | 'info' | 'success' | 'warning': material-ui./api/alert – Evan Trimboli Commented May 13, 2021 at 0:41
• 1 Thanks! I just had to limit the types to those strings and got it to work. – codeEagle123 Commented May 13, 2021 at 0:51

4 Answers 4

The severity of Material-ui alerts can be one of four types 'error' | 'info' | 'success' | 'warning' according to the documentation material-ui./api/alert. The problem you are having is because the severity property of your Alert ponent has been assigned an undefined value from your alertContext.snackbarType. To avoid errors if something goes wrong, it would be good practice to set a default severity type as follows:

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

I just ran into the same issue and solved it by importing the type from @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>
    )

}

You can use useState of React and create a object to store severity and message.

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

and Mui ponent is below.

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

it works without any issue and you can modify the severity and message whenever you need.

I was trying the same thing, and I got the following error:

Type 'string' is not assignable to type 'OverridableStringUnion<AlertColor, AlertPropsColorOverrides> | undefined'.ts(2322)
Alert.d.ts(85, 3): The expected type es from property 'severity' which is declared here on type 'IntrinsicAttributes & AlertProps & AlertSlotsAndSlotProps'
(property) AlertProps.severity?: OverridableStringUnion<AlertColor, AlertPropsColorOverrides> | undefined

I had my alert set up take in a message and "severity" depending on whether it was successful or not...

const [alertText, setAlertText] = useState({
      'severity': 'success',
      'text': ''
    })

I previously had:

{alertText && <Alert id={alertText.severity} severity={alertText.severity}>{alertText.text}
        </Alert>}

I tried substituting sx={{ severity: ${alertText.severity} }} and it worked!