René Stalder René Stalder - 1 year ago 1313
Javascript Question

How to setup Material-UI for React with Typescript?

I've run in some problems add Material UI to my React project, which is programmed with Typescript.

According to the tutorial, I start with adding the react-tab-event-plugin first.

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

// Needed for onTouchTap
// Can go away when react 1.0 release
// Check this repo:

Doing this, I get an error about the missing default export.

ERROR in ./src/index.tsx
(4,8): error TS1192: Module ''react-tap-event-plugin'' has no default export.

Adding Material UI

import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

Throws following build error

ERROR in ./src/containers/index.tsx
(8,25): error TS2307: Cannot find module 'material-ui/styles/getMuiTheme'.

ERROR in ./src/containers/index.tsx
(9,30): error TS2307: Cannot find module 'material-ui/styles/MuiThemeProvider'.

My Webpack Config is quite easy and did work with every React npm modul when I added the typings, until now.

var cssnext = require('postcss-cssnext')
var postcssImport = require('postcss-import')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

// noinspection JSUnresolvedVariable
module.exports = {
entry: {
app: './src/index.tsx',
lib: [
output: {
path: './dist',
filename: '[name].js'
devtool: 'source-map',
devServer: {
contentBase: '/dist/',
inline: true,
port: 3333,
host: ''
resolve: {
// Add `.ts` and `.tsx` as a resolvable extension.
extensions: [ '', '.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.css', '.html' ],
modulesDirectories: ['src', 'node_modules']
module: {
loaders: [
// All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
{ test: /\.ts(x?)$/, loader: 'babel-loader!ts-loader' },
{ test: /\.html$/, loader: 'file?name=[name].[ext]' },
{ test: /\.json$/, loader: 'json' },
{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader') }
preLoaders: [
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ test: /\.js$/, loader: 'source-map-loader' }
/* loaders: [
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader!ts-loader',
query: {
presets: [
plugins: [
new ExtractTextPlugin('[name].css', {
allChunks: true
postcss: function (webpack) {
return [
addDependencyTo: webpack
browsers: 'last 2 versions, ie >= 9'
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
'react': 'React',
'react-dom': 'ReactDOM'

Typing for both, react-tap-event-plugin and Material-UI are installed.

What's wrong?

Answer Source

There are now updated typings for Material UI v0.15.0.

You can find the definition file here:

For an easy installation, you can use Typings.

$ typings install dt~material-ui --global --save

After that, you can do following:

import * as injectTapEventPlugin from 'react-tap-event-plugin';

// Needed for onTouchTap
// Check this repo:

Then use Material UI like this:

import * as React from 'react';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import {MuiThemeProvider, lightBaseTheme} from "material-ui/styles";

const lightMuiTheme = getMuiTheme(lightBaseTheme);

class Root extends React.Component<any, any> {
  render() {
    return (
      <MuiThemeProvider muiTheme={lightMuiTheme}>

The MyComponent would consume Material UI as defined in the docs:

import RaisedButton from 'material-ui/RaisedButton';

const MyComponent = (props:MyComponentProps) => {
  return (
      <RaisedButton label="Default" />

export default MyComponent;

2016-08-08: Answer updated due to state change of the package.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download