如何使用 MaterializeCSS 开发 React？答案

【问题标题】：How to develop react with MaterializeCSS?如何使用 MaterializeCSS 开发 React？
【发布时间】：2016-07-04 18:31:02
【问题描述】：

我已经通过 npm 安装了 MaterializeCSS。但我不确定如何使用 MaterializeCSS。我正在使用 webpack。

任何人都可以推荐一个教程或其他东西来获得支持吗？

是直接使用 Bootstrap 还是直接跳入 MaterializeCSS 好？

【问题讨论】：

标签： twitter-bootstrap reactjs npm webpack materialize

【解决方案1】：

您确定要使用的是 material-css 吗？或者它是materialize-css？

关于导入文件，您可以简单地将这些添加到您的 HTML 中（用于引导程序）

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

据我所知，不应将前端文件作为 node_modules 依赖项，因此您可以考虑使用 CDN 而不是通过 NPM 安装 Bootstrap/Materialize。它也更快。

【讨论】：

感谢 avi 的提示。在这几个月之后，我觉得这个问题真的很愚蠢，因为 webpack 没有链接 css 框架。我的坏，因为我是一个初学者。对不起你们，谢谢:)

【解决方案2】：

试试这个， https://material-ui.com/,

Material UI 由 google 开发，实现 Material 设计理念的 React 组件。

【讨论】：

【解决方案3】：

我在 react materializecss 上做了很多工作 React-Materialize-Boilerplate 一个例子Project 查看 repo，在 index.html 中放置链接并从 npm 下载 materializecss 以使用动画和激活

要使用样式，只需添加类
要添加动画，请使用

import { M } from 'materializecss';

并激活一些东西

在类组件中

  componentDidMount(){
    var elems = document.querySelectorAll('.dropdown-trigger');
    M.Dropdown.init(elems, {
      // if u have anything additional info to add
    });
    // or if autoinit
    M.AutoInit();
  }

在功能组件中

useEffect(() => {
    var elems = document.querySelectorAll('.dropdown-trigger');
    M.Dropdown.init(elems, {
      // if u have anything additional info to add
    });
})

【讨论】：