'How to import Alert / AlertTitle component with MaterialUI

I am really confused - this example for using React MaterialUI says I can use this for a Snackbar:

    <Snackbar message="Here is snackbar message" open={true} autoHideDuration={6000} onClose={() => {}}>
        <Alert severity="error">
          <AlertTitle>Error</AlertTitle>
             This is an error alert — check it out!
        </Alert>
    </Snackbar>

but @materialui/core does not export an Alert or AlertTitle components:

Here is the link that talks about Alert / AlertTitle - but I cannot figure out how to import these components :(

https://material-ui.com/components/alert/

Solution 1:^[1]

The documentation examples show a code excerpt by default, but clicking on <> expands the full code including the imports. The Alert component is part of the lab not the core. Components in the lab can have breaking changes with each release.

Here is how you import Alert and AlertTitle:

import Alert from '@material-ui/lab/Alert';
import AlertTitle from '@material-ui/lab/AlertTitle';

The lab is a separate npm/yarn install as indicated in the instructions here: https://material-ui.com/components/about-the-lab/#installation

// with npm
npm install @material-ui/lab

// with yarn
yarn add @material-ui/lab

Solution 2:^[2]

Since the release of Material UI v5.0.0, you can import Alert from @mui/material or @mui/material/Alert:

import Alert from '@mui/material/Alert';
// or
import { Alert } from '@mui/material';

Here is the full Alert API.

Note: You can follow the migration guide if you are upgrading from MUI v4 to MUI v5.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Benny Neugebauer

'How to import Alert / AlertTitle component with MaterialUI

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]