4

我真的很困惑 -这个使用 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组件：

enter image description here

这是关于 Alert / AlertTitle 的链接 - 但我无法弄清楚如何导入这些组件:(

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

4

2 回答 2

14

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

以下是您如何导入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
于 2020-02-21T19:47:26.410 回答
0

自Material UI v5.0.0发布以来，您可以Alert从@mui/material或导入@mui/material/Alert：

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

这是完整的警报 API。

注意：如果您从 MUI v4 升级到 MUI v5，您可以按照迁移指南进行操作。

于 2022-02-21T23:19:51.220 回答