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-p
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",
@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
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
declare module 'material-ui/lib/text-field' {
to
declare module '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.
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