如何在反应中使用物化下拉菜单

Question

我拥有的是一个带有 React 钩子的应用程序，我刚刚在其中下载了纯粹的物化 css。我正在尝试实现一个将根据以下内容显示下拉菜单的按钮：

https://materializecss.com/dropdown.html

当然我没有也不想查询。所以那里关于如何触发下拉菜单的信息是不可用的。谷歌搜索我意识到你应该从 materialize-css“导入”M。像这样：

import M from 'materialize-css';  

useEffect(){
    let elems = document.querySelectorAll('.dropdown-trigger');
    M.Dropdown.init(elems, {inDuration: 300, outDuration: 225});
}

但这当然行不通。我没有名为“materialize-css”的组件。而且我无法导入 css 文件，它不是一个组件，而是一个简单的 css 文件。
所以我所做的就是从这里下载：

https://materializecss.com/getting-started.html

并获取 .js 文件。但是现在呢？如果我像这样在我的组件中导入它：

    import M from 'materialize-css.js';

然后一切都坏了。仅从组件中包含该文件将使我的应用程序崩溃并出现很多关于 M 的错误。这是要走的路吗？或者我应该如何与 materialize 交互以更改 css 元素？

Answer 1

你应该通过 npm 安装这个包 npm install materialize-css@next

然后将其导入您的组件import * as M from 'materialize-css'。然后就可以开始了

如果你更喜欢添加 js 文件而不是安装包，你可以在这里阅读更多

如何在反应中使用物化下拉菜单

How to use materialize dropdown in react

materialize

reactjs