How to setup Material-UI for React with Typescript?

Question

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: // https://github.com/zilverline/react-tap-event-plugin injectTapEventPlugin(); 

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: [        './node_modules/react/react.js',        './node_modules/react-dom',        './node_modules/normalize.css/normalize.css'      ]    },    output: {      path: './dist',      filename: '[name].js'    },    devtool: 'source-map',    devServer: {      contentBase: '/dist/',      inline: true,      port: 3333,      host: '0.0.0.0'    },    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: [       'es2015',       'react'       ]       }       }       ]*/    },    plugins: [      new ExtractTextPlugin('[name].css', {        allChunks: true      })    ],    postcss: function (webpack) {      return [        postcssImport({          addDependencyTo: webpack        }),        cssnext({          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 1

@types/material-ui is now available, exported from its DefinitelyTyped source.

npm install @types/material-ui --save-dev

npm install @types/react-tap-event-plugin --save-dev

Afterwards, you can do following:

import * as injectTapEventPlugin from 'react-tap-event-plugin';  // Needed for onTouchTap // Check this repo: // https://github.com/zilverline/react-tap-event-plugin injectTapEventPlugin(); 

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}>         <MyComponent/>       </MuiThemeProvider>     )   } } 

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.

2017-01-03: Add ref. to @types /qvazzler

Answer 2

Types are now bundled directly with Material-ui so there is no need to install @types/material-ui package.

Instead you can just install the @material-ui/core package as normal and it should work.

See the official Material-UI + Typescript example with create react app here: https://github.com/mui-org/material-ui/tree/master/examples/create-react-app-with-typescript