由于我使用 CSS module，因此导入 materialize css 会将其范围限定为该特定组件。所以我做了以下

步骤 1) 安装实现

npm install materialize-css@next 

步骤 2) 在 index.html 中

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/css/materialize.min.css">

步骤 3）在其需要的任何组件中导入 materialise.js

例如在 SomeComponent.js （例如，如果这是关于 sidenav）

import React from 'react';
import M from 'materialize-css';
....
// ref can only be used on class components
class SomeComponent extends Component {
  // get a reference to the element after the component has mounted
  componentDidMount(){
    M.Sidenav.init(this.sidenav);
  }

  render(){
    return (
      <ul className={this.props.classes}
          ref={ (sidenav) => {this.sidenav = sidenav} }
          id={this.props.id}>
        // menuItems
      </ul>
    )
  }
}

只是一个初学者，所以我很感激对此方法的缺点的任何评论

使用 NPM：

步骤 1) 安装实现

npm install materialize-css@next 

检查具体化文档以获取任何更新。不要错过最后的@nex t。安装的版本将类似于：^1.0.0-rc.2 或 ^1.0.0-alpha.4

步骤2）导入物化JS：

import M from 'materialize-css'

或者，如果这不起作用，您可以尝试 从“materialize-css/dist/js/materialize.min.js”导入 M

步骤 3) 导入物化 CSS：

在 index.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

或在 javascript 中

import 'materialize-css/dist/css/materialize.min.css'

为了使 css 导入工作，您需要一个css loader。请注意，此加载程序已包含在使用create-react-app构建的项目中，因此您无需执行后续步骤。如果相反，您使用的是自定义 webpack 配置，则运行：

npm install --save-dev style-loader css-loader

现在在 webpack 配置中添加 css-loader 和 style-loader

const path = require("path");

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: path.join(__dirname, "build")
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["env", "react"]
                    }
                }
            }
        ]
    }
}

现在您可以单独初始化组件，也可以使用 M.AutoInit() 一次性初始化所有组件；

步骤 4) 导入物化图标：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

使用 CDN：

在您的 HTML 文件中添加以下内容。

<!-- Materialize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

<!-- Materialize JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

<!-- Materialize Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

然后，在 webpack 配置中，添加外部：https ://webpack.js.org/configuration/externals/

您可以使用https://react-materialize.github.io/#/，为什么要重新发明轮子。

安装 react-materialize

npm install react-materialize

用法

import {Button, Icon} from 'react-materialize'

export default () => (
  <Button waves='light'>
    <Icon>thumb_up</Icon>
  </Button>
)

样本

https://github.com/hiteshsahu/react-materializecss-template

截屏

在 ReactJS 中有几种使用 Materialize CSS 的方法。但是，我总是使用以下最简单的一种。

在这里，您可以使用 Materialize CSS 类，就像您的 HTML 站点一样，仅使用带有标签的 ClassName。

1 ) 使用 NPM 为 ReactJS 安装 Materialise CSS。

npm install materialize-css@next 

2 ) 然后将缩小后的实体化 CSS 文件导入到index.js文件中。

import 'materialize-css/dist/css/materialize.min.css'

3 ) 现在，如果您想使用 google 图标，请在您的public/index.html文件中添加以下代码。

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

4 ) 最后要在输入表单或其他地方使用 Javascript 事件，请在您的public/index.html文件中添加以下代码。

 <!-- Compiled and minified JavaScript -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

NB =>由于所有文件都需要通过 index.js 文件，因此将缩小的 Materialize CSS 导入index.js一次就足够了。否则，您需要将这些 CSS 文件导入到您所有的 js 文件中。

这足以准备您的 ReactJS 文件夹以使用 Materialize CSS 启动和运行。快乐编码。

我可以推荐使用以下可能的方法：

1. 一种方法是将样式表文件包含在 index.html 中，并像这样在 React 组件中使用 className 属性。

       var myDivElement = <div className="foo" />;
       ReactDOM.render(myDivElement, document.getElementById('example'));
   

2. 另一种方法是将所有样式表捆绑在一个样式表文件中，并将它们用作前一个文件。

3. 一种选择是使用 webpack。通过使用 webpack，只需需要您想要包含的样式表，就可以在 jsx 文件中使用嵌入的样式表。

   require("./stylesheet.css")

   要详细检查 webpack 样式表选项：http ://webpack.github.io/docs/stylesheets.html

4. 另请参阅 JedWatson 的 classnames repo 以了解条件 className 的用法。 https://github.com/JedWatson/classnames