title: How to add properties to a styled material-ui props class in react with typescript
body: <p>I am wanting to use material-ui, using react and typescript. I would like to pass properties to the components, but cannot figure out how to do it. I am using the react-typescript example from the material-UI repo. What I tried is as follows:</p>
  
  <p>Add a properties interface:</p>
  
  <pre><code>const styles = (theme: Theme) =&gt;
    createStyles({
      root: {
        textAlign: 'center',
        paddingTop: theme.spacing.unit * 20,
      },
    });
  
  interface IndexProps
    extends WithStyles&lt;typeof styles&gt; {
    myText: string;
  }
  </code></pre>
  
  <p>then define my component, and use the property:</p>
  
  <pre><code>class Index extends React.Component&lt;IndexProps&gt; {
    render() {
      return (
        &lt;div className={this.props.classes.root}&gt;
          &lt;Typography variant="display1" gutterBottom&gt;
            Material-UI
          &lt;/Typography&gt;
          &lt;Typography variant="subheading" gutterBottom&gt;
            example project text=[{this.props.myText}]
          &lt;/Typography&gt;
          &lt;Button variant="raised" color="secondary" &gt;
            Super Secret Password
          &lt;/Button&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default withRoot(withStyles(styles)(Index));
  </code></pre>
  
  <p>On my Index page I put:</p>
  
  <pre><code>import * as React from 'react';
  import * as ReactDOM from 'react-dom';
  import Index from './pages/index';
  
  ReactDOM.render(&lt;Index myText="Foo" /&gt;, document.querySelector('#root'));
  </code></pre>
  
  <p>But get a compile error:</p>
  
  <pre><code>(5,18): Type '{ myText: string; }' has no properties in common with type 'IntrinsicAttributes'.
  </code></pre>
  
  <p>What am I doing wrong here? Any help would be greatly appreciated </p>
  
  <p>For completeness, my <code>packages.json</code> file is:</p>
  
  <pre><code>{
    "name": "create-react-app-with-typescript",
    "version": "0.1.0",
    "private": true,
    "main": "src/index.tsx",
    "dependencies": {
      "@material-ui/core": "latest",
      "@types/react": "*",
      "@types/react-dom": "*",
      "react": "latest",
      "react-dom": "latest",
      "react-scripts-ts": "latest"
    },
    "devDependencies": {
      "@types/jest": "*",
      "@types/node": "*",
      "typescript": "latest"
    },
    "scripts": {
      "start": "react-scripts-ts start",
      "build": "react-scripts-ts build",
      "test": "react-scripts-ts test --env=jsdom",
      "eject": "react-scripts-ts eject"
    }
  }
  </code></pre>