How to use materialize-css with React?

Question

I have a Meteor/React project, using ES6 modules. I've installed materialize-css using npm, but I'm not sure how to actually use the Materialize classes in my JSX code. What am I supposed to import from materialize-css? Or do I just have to include the CSS in my main index.html file?

I mostly want it for the grid system, as I'll be using material-ui for the actual UI components.

Answer 1

Since I use CSS Modules, importing materialize css would scope it to that particular component. So I did the following

Step 1) install materialise

npm install materialize-css@next  

Step 2) in 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"> 

Step 3) import materialise.js in whichever component its needed

for e.g. in SomeComponent.js (for e.g. if this is about a 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>     )   } } 

just a beginner, so I would appreciate any comments on downsides of this method