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

Solution Without index.html

1. From react-materialize - Installation

   npm install materialize-css

   npm install react-materialize

2. In your App.js or App.jsx add

   import "materialize-css/dist/css/materialize.min.css";
   import "materialize-css/dist/js/materialize.min.js";

---

Usage Examples:

Example 1

import React from "react";
import { Button } from "react-materialize";

export default function CustomMediaBox() {
  return  Click Me ;
  );
}

Example 2

import React from "react";
import { MediaBox } from "react-materialize";

export default function CustomMediaBox() {
  return (
    
      
    
  );
}

---

Optionally - Adding Icons

1. Although not required, if you want to use google icons, add the following to your App.css or any .css file imported from the App.js or App.jsx

   @import url('https://fonts.googleapis.com/icon?family=Material+Icons');

---

Note

If you get an error like this:

./node_modules/react-materialize/lib/Breadcrumb.js Module not found: Can't resolve 'classnames' in '/Users/artiomlk...

npm install classnames