没有index.html的解决方案

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，请确保使用其文档中列出的命令安装实现：

npm install materialize-css@next

不要错过最后的 @nex t。安装的版本将类似于：“ ^ 1.0.0-rc.2”或“ ^ 1.0.0-alpha.4”

第2步：导入实现：

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

import M from 'materialize-css/dist/js/materialize.min.js'

OR

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

import M from 'materialize-css'

要使CSS导入正常工作，您需要一个 css加载程序。请注意，在使用 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（）;单独或一次初始化所有组件。

使用CDN：

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

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

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

Answer 3

我可以推荐使用的方式：

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

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

另一种方法是将所有样式文件捆绑在一个样式表文件中，并将它们用作上一个样式文件。
一种选择可能是使用webpack。通过使用webpack，只需要包含要包含的样式表，就可以在jsx文件中使用嵌入式样式表。

require("./stylesheet.css")

详细检查webpack样式表选项：http://webpack.github.io/docs/stylesheets.html
另请参阅JedWatson的类名称repo以了解条件className用法。 https://github.com/JedWatson/classnames

Answer 4

你可以使用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

截图

Answer 5

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

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

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

netcat

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

npm install materialize-css@next

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

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

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

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

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

这足以准备您的ReactJS文件夹，以便与Materialize CSS一起运行。

Answer 6

为了解决包大小的问题，最简单的使用方法如下：

将CDN链接包括在index.html文件中
在React Component的构造函数M中初始化this.M = window.M
对于模态和其他Materialize组件，所有其他必需的初始化可以按照其文档中所述使用this.M
我喜欢在componentDidMount生命周期方法中进行那些初始化。
在componentWillUnmount内卸载时，我在初始化的Materialize Components实例上使用destroy（）方法。

Answer 7

您可以复制到＆＃34;导入＆＃34;文件夹并按

添加

import '../imports/stylesheets/materialize.min.css';

或将此用作LESS示例

@import '{}npm-package-name/stylesheets/...';

Answer 8

安装实体化

npm i materialize-css@next

初始化

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


function App() {

  useEffect(() => {
    M.AutoInit();
  },[])

  return (
    <div className="App">
         // content...
    </div>
  );
}

Answer 9

这些答案并没有满足我的最大担忧，即捆束大小和导入大量代码以使用一些组件。我已经写了一个解决方案here，其中包括代码拆分和简单的编译步骤。

关键点是：

编译基本JS文件（共有4个）
确保在导入/捆绑程序运行之前包括基本JS
将CSS导入更改为仅所需的内容
如果捆绑程序支持Sass，则通过捆绑程序运行materialize.scss或运行编译步骤以获取缩小的css文件。
导入各个组件并手动激活它们

Read post了解更多详情。

Answer 10

使用CDN：

buildscript.gradle

然后buildscript进行初始化。

Answer 11

没有index.html的解决方案

来自react-materialize - Installation

npm install materialize-css

npm install react-materialize

在您的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>
  );
}

（可选）-添加图标

尽管不是必需的，但如果您想使用google图标，请将以下内容添加到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

Answer 12

我不知道我来不及提出这个答案。您可以使用componentDidMount like this video

但是，它不使用react-hook。您最好使用react钩子（useEffects）

Answer 13

我想让materialbox工作，这就是我的工作方式

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时图像没有加载。

Answer 14

如何将 materialize-css 与带有图标和其他 js 功能的 React 一起使用

yarn add materialize-css@next --save 或 npm install materialize-css@next --save
yarn add install material-icons 或 npm install material-icons

3.请像这样导入以下内容； snap

导入'materialize-css/dist/css/materialize.min.css';

导入'materialize-css/dist/js/materialize';

导入'material-icons/iconfont/material-icons.css'

function App() {
  return (
    <div className="App">
     <nav className="nave-wrapper">
       <div className="container">
       <a href="#!" class="brand-logo left">Logo</a>
       <ul className="right">

         <li><a href="#!">Home</a></li>
         <li><a href="#!">About</a></li>
         <li><a href="#!">Contact</a></li>
       </ul>
        </div>
     
     </nav>
      <div className="container">
      <i class="material-icons">add</i>
      <i class="large material-icons">insert_chart</i>
      <div class="row">
      <form class="col s12">
      <div class="row">
        <div class="input-field col s6"/>
          <i class="material-icons prefix">account_circle</i>
          <input id="icon_prefix" type="text" class="validate"/>
          <label for="icon_prefix">First Name</label>
        </div>
        <div class="input-field col s6">
          <i class="material-icons prefix">phone</i>
          <input id="icon_telephone" type="tel" class="validate"/>
          <label for="icon_telephone">Telephone</label>
        </div>
      </form>
  </div>
     </div>
    </div>
  );
}

export default App;

Answer 15

安装 Materialise

npm i materialize-css@next
npm install react-materialize

初始化

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


const App = () => {
  useEffect(() => {
    // Init Materialize JS
    M.AutoInit();
  });

  return (
    <div className="App">
         // content...
    </div>
  );
}
export default App;

如何在React中使用materialize-css？

15 个答案:

没有index.html的解决方案

用法示例：

示例1

示例2

（可选）-添加图标

注意