title: How to setup Material-UI for React with Typescript?
body: <p>I've run in some problems add Material UI to my React project, which is programmed with Typescript.</p>
  
  <p>According to the tutorial, I start with adding the react-tab-event-plugin first.</p>
  
  <pre><code>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();
  </code></pre>
  
  <p>Doing this, I get an error about the missing default export.</p>
  
  <pre><code>ERROR in ./src/index.tsx
  (4,8): error TS1192: Module ''react-tap-event-plugin'' has no default export.
  </code></pre>
  
  <p>Adding Material UI</p>
  
  <pre><code>import getMuiTheme from 'material-ui/styles/getMuiTheme';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
  </code></pre>
  
  <p>Throws following build error</p>
  
  <pre><code>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'.
  </code></pre>
  
  <p>My Webpack Config is quite easy and did work with every React npm modul when I added the typings, until now.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &gt;= 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'
     }
     */
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Typing for both, react-tap-event-plugin and Material-UI are installed.</p>
  
  <p><strong>What's wrong?</strong></p>