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 <Button> Click Me </Button>;
  );
}

Example 2

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

export default function CustomMediaBox() {
  return (
    <MediaBox
      options={{
        inDuration: 275,
        onCloseEnd: null,
        onCloseStart: null,
        onOpenEnd: null,
        onOpenStart: null,
        outDuration: 200
      }}
    >
      <img
        alt=""
        src="https://materializecss.com/images/sample-1.jpg"
        width="650"
      />
    </MediaBox>
  );
}

---

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