Use Create-React-App with Material UI

Question

I\'m new to Material UI and ReactJS. I\'ve been playing around with Create-React-App (CRA) and reactstrap. My question is, can I use Material UI and CRA together to build an ap

Answer 1

First install material-ui

npm install --save material-ui

or

yarn add material-ui

src/App.js

import React, { Component } from 'react';

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; // add
import RaisedButton from 'material-ui/RaisedButton'; // add

import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (

      

      

        

          
          
Welcome to React
        
        

          To get started, edit src/App.js and save to reload.
        

        

      

      

    );
  }
}

export default App;

In summary, these are the things to be done:

• Install necessary packages.

• import MuiThemeProvider component in App.js, Enclose the app div in MuiThemeProvider component

• Now you can import and use any component in material-ui like I used RaisedButton here

---

Versions of material-ui before 0.19.1 required react-tap-event-plugin

For those versions, you had to do make this change in index.js

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

import injectTapEventPlugin from 'react-tap-event-plugin';   // add

import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

injectTapEventPlugin();  // add

ReactDOM.render(, document.getElementById('root'));
registerServiceWorker();

• import injectTapEventPlugin from react-tap-event-plugin in index.js and initialise it. injectTapEventPlugin is used inorder to remove tap delay in iOS.