如何在 React 中使用 materialize-css？

Question

我有一个使用 ES6 模块的 Meteor/React 项目。我已经使用 npm 安装了 materialize-css，但我不确定如何在我的 JSX 代码中实际使用 Materialize 类。我应该从materialize-css导入什么？还是我只需要在我的主 index.html 文件中包含 CSS？

我主要希望它用于网格系统，因为我将 material-ui 用于实际的 UI 组件。

原文由 ffxsam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于我使用 CSS 模块，因此导入 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>
    )
  }
}

只是一个初学者，所以我很感激任何关于这种方法缺点的评论

原文由 supi 发布，翻译遵循 CC BY-SA 3.0 许可协议