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.

Solution 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-plugininjectTapEventPlugin();

Then use Material UI like this:

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

const lightMuiTheme = getMuiTheme(lightBaseTheme);

classRootextendsReact.Component<any, any> {
  render() {
    return (
      <MuiThemeProvidermuiTheme={lightMuiTheme}><MyComponent/></MuiThemeProvider>
    )
  }
}

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

importRaisedButtonfrom'material-ui/RaisedButton';

constMyComponent = (props:MyComponentProps) => {
  return (
      <RaisedButtonlabel="Default" />
  )
}

exportdefaultMyComponent;

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

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

Solution 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

Solution 3:

Your comment already pointed out the core problem. The typings are not up-to-date, or in other words: completely off.

Long story short, it seems like the structure of material-ui has changed and everything is camelcase (instead of dashes) and in root, not the lib folder now.

To fix this, open your material-ui/index.d.ts file and start changing everything from

declaremodule'material-ui/lib/text-field' {

to

declaremodule'material-ui/TextField' {

If unsure, check your node_modules/material-ui folder to see the file structure. The ambient module name must match the underlying file structure.

This probably won't fix all your problems, but it could be a start.

Solution 4:

Add these two dependencies to your package.json file and run npm install and then start. It worked for me

"@types/material-ui": "^0.21.1", "material-ui": "^0.20.0",