我有一个使用ES6模块的Meteor/React项目。我已经使用npm安装了materialize-css,但我不确定如何在JSX代码中实际使用Materialize类。我应该从materialize-css导入什么?或者我只需要在我的主index.html文件中包含CSS?
我主要希望在网格系统中使用它,因为我将使用material-ui作为实际的UI组件。
发布于 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>
)
}
}
我只是一个初学者,所以如果你对这种方法的缺点有任何意见,我将不胜感激。
发布于 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肯定会让事情变得更容易。
发布于 2016-08-25 04:10:10
你可以复制到"imports“文件夹中,然后通过
import '../imports/stylesheets/materialize.min.css';
或者将此用于较少的示例
@import '{}npm-package-name/stylesheets/...';
https://stackoverflow.com/questions/35499842
复制相似问题