【问题标题】:How to import Alert / AlertTitle component with MaterialUI如何使用 Material UI 导入警报/警报标题组件
【发布时间】:2020-06-06 06:18:05
【问题描述】:

我真的很困惑 - 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 不会导出AlertAlertTitle 组件:

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

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

【问题讨论】:

    标签: reactjs material-ui snackbar react-material


    【解决方案1】:

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

    以下是导入AlertAlertTitle 的方法:

    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
    

    【讨论】:

    • node_modules/@material-ui/lab中没有lab文件夹,它不存在:(
    • 我已添加到我的答案中。
    • Material-UI 应该清理它!如果“实验室”是一个单独的模块,为什么在主文档中描述(和使用)它的组件?某些组件来自单独的模块,这完全不明显。
    • @NickPerkins 文档中的所有示例都展示了如何导入组件。这些组件位于“实验室”标题下,带有描述此内容的 About the lab 部分。您认为 Material-UI 应该采取哪些进一步措施?
    • 这只是一个混淆点。一旦您了解“实验室”,就可以了。但是,如果您不了解“实验室”,您可能会认为所有记录在案的组件都在“核心”中,并且当文档中的某些内容(例如“警报”)时,您可能会感到惊讶(例如我和 OP)不只是工作。我喜欢 Material-UI,用了很多年,但还是被这个绊倒了。
    猜你喜欢
    • 2020-07-23
    • 1970-01-01
    • 2013-02-10
    • 2020-05-11
    • 2020-06-27
    • 2016-02-24
    • 1970-01-01
    • 1970-01-01
    • 2023-03-11
    相关资源
    最近更新 更多