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

• Install Materialize

npm i materialize-css@next

• Initialize

import React, { useEffect } from 'react';
import 'materialize-css/dist/css/materialize.min.css';
import M from 'materialize-css/dist/js/materialize.min.js';


function App() {

  useEffect(() => {
    M.AutoInit();
  },[])

  return (
    <div className="App">
         // content...
    </div>
  );
}

Answer 2

You can copy into "imports" folder and add by

import '../imports/stylesheets/materialize.min.css';

or use this for LESS example

@import '{}npm-package-name/stylesheets/...';

Answer 3

Use CDN:

<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Then const M = window.M; to do initialization.

Answer 4

I wanted to get materialbox to work and here is how i did it

import React, { Component } from "react";
import M from "materialize-css/dist/js/materialize.min.js";

class Image extends Component {
  constructor(props) {
    super(props);
    this.imageRef = React.createRef();
  }

  onLoad = () => {
    M.Materialbox.init(this.imageRef.current);
  };

  render() {
    return (
      <img
        src="..."
        alt="..."
        className="materialboxed"
        ref={this.imageRef}
        onLoad={this.onLoad}
      />
    );
  }
}

export default Image;

an interesting thing to note - it didnt work when i was trying M.init inside componentDidMount maybe because the image doesnt load by the time the call to componentDidMount is made.

Answer 5

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.

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

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

 <!-- Compiled and minified JavaScript -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

---

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.

---

Answer 6

There are possible ways that I can recommend to use:

1. One way is just include your stylesheet file in index.html and use className property in your React components just like this.

       var myDivElement = <div className="foo" />;
       ReactDOM.render(myDivElement, document.getElementById('example'));
   

2. Another way is to bundle all your stylesheeets in one stylesheet file and to use them as previous one.

3. One option could be to use webpack. By using webpack, it is possible to use embedded stylesheets in jsx files just by requiring stylesheet that you want to include.

   require("./stylesheet.css")

   To examine in detail webpack stylesheet option: http://webpack.github.io/docs/stylesheets.html

4. Also see JedWatson's classnames repo for conditional className usage. https://github.com/JedWatson/classnames