How to setup Material-UI for React with Typescript?

前端 未结 4 1200
夕颜
夕颜 2021-01-31 17:24

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

相关标签:
4条回答
  • 2021-01-31 17:35

    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",

    0 讨论(0)
  • 2021-01-31 17:38

    @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

    0 讨论(0)
  • 2021-01-31 17:38

    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.

    0 讨论(0)
  • 2021-01-31 17:50

    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

    0 讨论(0)
提交回复
热议问题