如何在React中使用materialize-css？

Question

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

我主要想要它用于网格系统,因为我将使用material-ui作为实际的UI组件.

Answer 1

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

步骤1)安装实现

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

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

Answer 2

使用NPM:

第1步:安装实体化

如果您使用的是npm,请确保使用其文档中列出的命令安装materialize:

npm install materialize-css@next 

最后不要错过 ' @nex t'.安装的版本类似于:"^ 1.0.0-rc.2"或"^ 1.0.0-alpha.4"

第2步:导入实现:

import M from 'materialize-css'

要么

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

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

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

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

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

现在,您可以单独初始化组件,或者使用M.AutoInit()一次初始化组件;

随着CDN:

在HTML文件中添加以下内容.

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"]
                    }
                }
            }
        ]
    }
}

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

Answer 3

至于这个问题，我认为只是 npm i materialize-css然后

import "materialize-css/dist/css/materialize.min.css";
import "materialize-css/dist/js/materialize.min.js";

应该做这项工作。

我想分享我遇到的问题以及我是如何解决的。我想让材料盒工作，这就是我是如何做到的

import React, { Component } from "react";
import M from "materialize-css/dist/js/materialize.min.js";

class Image extends Component {
  constructor(props) {
    super(props);
    this.imageRef = React.createRef();
  }

  onLoad = () => {
    M.Materialbox.init(this.imageRef.current);
  };

  render() {
    return (
      <img
        src="..."
        alt="..."
        className="materialboxed"
        ref={this.imageRef}
        onLoad={this.onLoad}
      />
    );
  }
}

export default Image;

M.init值得注意的一件有趣的事情 - 当我尝试内部时它不起作用，componentDidMount可能是因为在调用时图像没有加载componentDidMount。

如果你想使用大量 JS 和模态等组件，react-materialize肯定会让事情变得更容易。

Answer 4

我可以推荐使用的方法:

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的类名repo以了解条件className的用法. https://github.com/JedWatson/classnames

Answer 5

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

安装 react-materialize

npm install react-具体化

用法

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

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

样品

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

屏幕截图

Answer 6

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

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

1）使用NPM安装Materialize CSS for ReactJS。

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>

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

这足以为您的ReactJS文件夹做好准备，以使其与Materialize CSS一起运行。

Answer 7

没有 index.html 的解决方案

1. 来自react-materialize - 安装

   npm install materialize-css

   npm install react-materialize

2. 在您的App.js或App.jsx添加

   import "materialize-css/dist/css/materialize.min.css";
   import "materialize-css/dist/js/materialize.min.js";

用法示例：

示例 1

import React from "react";
import { Button } from "react-materialize";

export default function CustomMediaBox() {
  return <Button> Click Me </Button>;
  );
}

示例 2

import React from "react";
import { MediaBox } from "react-materialize";

export default function CustomMediaBox() {
  return (
    <MediaBox
      options={{
        inDuration: 275,
        onCloseEnd: null,
        onCloseStart: null,
        onOpenEnd: null,
        onOpenStart: null,
        outDuration: 200
      }}
    >
      <img
        alt=""
        src="https://materializecss.com/images/sample-1.jpg"
        width="650"
      />
    </MediaBox>
  );
}

可选 - 添加图标

1. 虽然不是必需的，但如果您想使用谷歌图标，请将以下内容添加到您的App.css或.css从App.js或导入的任何文件中App.jsx

   @import url('https://fonts.googleapis.com/icon?family=Material+Icons');

笔记

如果你得到这样的错误：

./node_modules/react-materialize/lib/Breadcrumb.js Module not found: Can't resolve 'classnames' in '/Users/artiomlk...

npm install classnames