如何在 React 中使用 materialize-css? [英] How to use materialize-css with React?

问题描述

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

I have a Meteor/React project, using ES6 modules. I've installed materialize-css using npm, but I'm not sure how to actually use the Materialize classes in my JSX code. What am I supposed to import from materialize-css? Or do I just have to include the CSS in my main index.html file?

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

I mostly want it for the grid system, as I'll be using material-ui for the actual UI components.

推荐答案

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

Since I use CSS Modules, importing materialize css would scope it to that particular component. So I did the following

步骤1)安装materialise

Step 1) install materialise

npm install materialize-css@next 

index.html 中的步骤 2)

Step 2) in 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

Step 3) import materialise.js in whichever component its needed

例如在 SomeComponent.js 中(例如，如果这是关于 sidenav)

for e.g. in SomeComponent.js (for e.g. if this is about a 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>
    )
  }
}

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

just a beginner, so I would appreciate any comments on downsides of this method

这篇关于如何在 React 中使用 materialize-css?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！