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. Wh

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

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 (
      
 {this.sidenav = sidenav} }
          id={this.props.id}>
        // menuItems
      
    )
  }
}

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