React & Material-UI, recently breaking changes.

Written by - Saumya

17 April 2016

Here we will talk about the recent changes in Material-UI and how it affects our React code.

Before moving further, if you have not yet started with Material-UI, here is my first post describing the details.

Current version of React is 15.0.1. To make Material-UI compatible with this version of React, a new version of Material-UI which is 0.15.0-beta.1 is released recently. However there are some breaking changes in this release of Material-UI if you are coming from the last version which is 0.15.0-alpha.2. The complete release note is here along with the change logs.

There are couple of things to change in our React application code.

import / require

The syntax for getting a component from Material-UI is changed. 

// Use
var AppBar = require('material-ui/AppBar')['default'] ;
// Or
import AppBar from 'material-ui/AppBar';
// instead of
var AppBar = require('material-ui/lib/app-bar'); // deprecated

Notice

  • there is no lib in between material-ui and AppBar
  • if using require , there is a ['default'] at the end

default theme handling

The default theme handling has changed for components and for that, some changes are required in application code.

In the RootControllerView / MainControllerView, import the following.

import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

In the same RootControllerView / MainControllerView, inside component declaration add

childContextTypes:{
  muiTheme: React.PropTypes.object.isRequired,
},
getChildContext() {
  return {muiTheme: getMuiTheme(baseTheme)};
},

Here is a little more in-depth view of the scenario.

Happy Reacting.