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

There are several ways of using Materialize CSS in ReactJS. However, I always use the following easiest one.

Here you can use Materialize CSS classes just like your HTML site using only ClassName with tags.

---

1 ) Install Materialize CSS for ReactJS using NPM.

npm install materialize-css@next 

2 ) Then import the minified materialize CSS file to index.js file.

import 'materialize-css/dist/css/materialize.min.css'

3 ) Now if you want to use google icons add the following codes in your public / index.html file.

4 ) Finally to use Javascript events on input forms or other places add the following codes in your public / index.html file.

---

N.B. => Since all files need to go through the index.js file, so importing your minified Materialize CSS to index.js once is enough. Otherwise, you need to import these CSS files to all your js files.

---

That's enough to prepare your ReactJS folder for up and running with Materialize CSS. Happy Coding.

---