如何在React中使用materialize-css？
如何在React中使用materialize-css？
提问于 2016-02-19 15:35:11
我有一个使用ES6模块的Meteor/React项目。我已经使用npm安装了materialize-css，但我不确定如何在JSX代码中实际使用Materialize类。我应该从materialize-css导入什么？或者我只需要在我的主index.html文件中包含CSS？
我主要希望在网格系统中使用它，因为我将使用material-ui作为实际的UI组件。
回答 5
Stack Overflow用户
发布于 2018-02-15 23:58:33
因为我使用CSS模块，所以导入materialize css会将其范围扩大到特定组件。因此，我做了以下工作
步骤1)安装materialise
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>
)
}
}我只是一个初学者，所以如果你对这种方法的缺点有任何意见，我将不胜感激。
Stack Overflow用户
发布于 2020-11-16 00:46:10
至于问题，我认为只需要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="..."
alt="..."
className="materialboxed"
ref={this.imageRef}
onLoad={this.onLoad}
/>
);
}
}
export default Image;有趣的是，当我在componentDidMount中尝试M.init时，它不起作用，可能是因为调用componentDidMount时图像没有加载。
如果你想通过像模态等组件来使用大量的JS，react-materialize肯定会让事情变得更容易。
Stack Overflow用户
发布于 2016-08-25 04:10:10
你可以复制到"imports“文件夹中，然后通过
import '../imports/stylesheets/materialize.min.css';或者将此用于较少的示例
@import '{}npm-package-name/stylesheets/...';页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35499842
复制相关文章
相似问题