如何在 React 中使用 materialize-css？

Posted 2023-02-22

【中文标题】如何在 React 中使用 materialize-css？

【英文标题】：How to use materialize-css with React?

【发布时间】：2016-05-31 16:53:22

【问题描述】：

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

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

【问题讨论】：

我稍后会主演这个，希望你能得到一个好的回应 - 我没有运气使用 ES6 导入将materialize-css 引入我的项目，我不得不求助于老派<link rel="stylesheet" href="[insert CDN url]" >，我不喜欢。

你在使用 webpack 吗？你找到解决办法了吗？我也一直只将 CSS 用于网格，但我在 head 标签中使用了一个链接；我只是想看看其他人如何使用它。

【参考方案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>
    )
  

只是一个初学者，所以我会感谢任何关于这种方法缺点的 cmets

【讨论】：

我还需要添加 JQuery 和 Materialize.min.js 还是 npm 库会处理它？

npm 库负责处理它。

不错。 JQuery 也不再是 Materialize 的依赖项。

我以为 materialize-css 和 react-materialize 是一样的，但它们完全不同。如果您想使用React Materialize 中的 API，请按照那里的说明进行操作。这比在这里解码所有答案要好。

我制作了一个

【参考方案2】：

使用 NPM：

步骤1）安装物化

npm install materialize-css@next 

检查具体化文档以获取任何更新。不要错过最后的 @next。安装的版本将类似于：^1.0.0-rc.2 或 ^1.0.0-alpha.4

步骤2）导入物化JS：

import M from 'materialize-css'

或者，如果这不起作用，您可以尝试 import M from 'materialize-css/dist/js/materialize.min.js'

步骤 3) 导入具体化 CSS：

在 index.html 中

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

javascript 中的或

import 'materialize-css/dist/css/materialize.min.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() 一次性初始化所有组件；

第四步）导入物化图标：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

---

使用 CDN：

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

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

<!-- Materialize JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

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

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

【讨论】：

谢谢！使用 npm 为我使用 React 16.6.0 初始化我的 Materialize'd <select> 工作。以前，单独使用CDN链接是不行的，不管我在哪里尝试添加代码进行初始化。尽管我认为在 public/ 目录中使用单独的静态 JS 文件是可行的，但我从不喜欢将其作为长期解决方案。

【参考方案3】：

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

截图

【讨论】：

React-Materialize 只实现了 Materialize 组件的一个子集，因此仍然希望找到一种方法来使用 Materialize 本身。

我发现 Material-UI 可以替代Materilize CSS。它实现了大多数材料 ui 组件，并有大量示例可供快速入门。我什至使用 matetial-ui 制作了我的网页，参见HiteshSahu.com

实际上 React-Materialize 正在重新发明人员。如果您使用这个库，您将看到实际上 div、nav 和其他元素的最终类将具有特定名称，而不是与具体化 CSS 相同的名称。在我看来，这会带来很多混乱，并且需要额外的工作人员来学习。我更喜欢按照@supi 的建议导入 CSS。

@HiteshSahu 示例链接为 404

【参考方案4】：

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

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

---

1 ) 使用 NPM 为 ReactJS 安装 Materialize CSS。

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 文件夹准备好使用 Materialise CSS 启动和运行。快乐编码。

---

【讨论】：

在哪里可以看到所有这些图标？如果我不知道它们是什么，我就不知道如何使用它们。

图标，您可以查看以下任一链接：material.io/resources/icons/?style=baselinematerializecss.com/icons.html

【参考方案5】：

我可以推荐几种可能的使用方式：

一种方法是将您的样式表文件包含在 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 的类名存储库以了解条件类名的使用。 https://github.com/JedWatson/classnames

【讨论】：

不幸的是，这些都没有帮助我。如果我在 HTML <head> 中包含样式表，Materialize 的 CSS 与 Material UI 冲突。 i.stack.imgur.com/bGzzo.png

如果自定义是主要问题，这在 Material 的主题管理器属性中可用。勾选此部分配置主题material-ui.com/#/customization/themes@ffxsam

但是像$(".modal").modal('open');这样在jquery之上使用方法呢？

@Tomasz 你可以在 React 的生命周期方法中编写它们。

@burakhanalkan material-ui 的问题，它没有实现许多组件，具体化具有，例如可折叠、视差或简单的网格系统。

【参考方案6】：

没有 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
        
        src="https://materializecss.com/images/sample-1.jpg"
        
      />
    </MediaBox>
  );

---

可选 - 添加图标

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

@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

【参考方案7】：

至于问题，我想只是npm i materialize-css 然后

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

应该做的工作。

---

我想分享我遇到的一个问题以及我是如何解决它的。 我想让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="..."
        
        className="materialboxed"
        ref=this.imageRef
        onLoad=this.onLoad
      />
    );
  


export default Image;

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

---

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

【参考方案8】：

为了解决bundle size的问题，最简单的使用方法如下：

在 index.html 文件中包含 CDN 链接 在 React 组件的构造函数 this.M = window.M 中初始化 M 在 Modals 和其他 Materialize 组件的情况下，所有其他必需的初始化都可以按照他们的文档中提到的使用 this.M 来完成 我喜欢在 componentDidMount 生命周期方法中进行这些初始化。 卸载时，即在 componentWillUnmount 内，我对初始化的 Materialize 组件的实例使用 destroy() 方法。

【参考方案9】：

您可以复制到“imports”文件夹并添加

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

或将其用于 LESS 示例

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

【参考方案10】：

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

重点是：

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

Read post了解更多详情。

【参考方案11】：

使用 CDN：

<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

然后const M = window.M;做初始化。

【参考方案12】：

安装 Materialise

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

【参考方案13】：

我不知道我是否为时已晚，无法回答这个问题。 你可以使用componentDidMount like this video

但是，它不使用 react-hooks。你最好使用 react hooks (useEffects)

【参考方案14】：

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

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;

【参考方案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;