How to import Alert / AlertTitle component with MaterialUI

Admin 1
Viewed 13934

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:

enter image description here

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/

snackbar react-material material-ui reactjs
2 Answers

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
user_74959300

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.

user_4516340
Related