如何使用 Material UI 导入警报/警报标题组件

Question

我真的很困惑 - this example 使用 React MaterialUI 说我可以将它用于 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>

但@materialui/core 不会导出Alert 或AlertTitle 组件：

这里是关于 Alert / AlertTitle 的链接 - 但我不知道如何导入这些组件:(

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

Answer 1

文档示例默认显示代码摘录，但单击 <> 会展开包括导入在内的完整代码。 Alert 组件是 lab 的一部分，而不是核心。实验室中的组件可能会随着每个版本的发布而发生重大更改。

以下是导入Alert 和AlertTitle 的方法：

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

该实验室是一个单独的 npm/yarn 安装，如此处的说明所示：https://material-ui.com/components/about-the-lab/#installation

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

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