reactjs - 如何在 React 中使用 Materialize-CSS？

Question

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

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

Answer 1

由于我使用 CSS 模块，导入 Materialize CSS 会将其范围限定到该特定组件。所以我做了以下事情

步骤1)安装materialise

npm install materialize-css@next 

index.html 中的步骤 2)

<!--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>
    )
  }
}

只是一个初学者，因此我将不胜感激任何有关此方法缺点的评论