title: How to type the use of Material-UI's `withStyles` decorator in the example?
body: <p>I'm trying to figure out how to annotate the types of the following styles (I converted from plain JavaScript to TypeScript and am adding type annotations):</p>
  
  <pre><code>import * as React from 'react'
  import { withStyles } from '@material-ui/core'
  
  @withStyles(styles) // TYPE ERROR HERE
  export default class App extends React.Component&lt;{}, {}&gt; {
      render(): JSX.Element {
          return (
              &lt;div className="some-class"&gt; Hello &lt;/div&gt;
          )
      }
  }
  
  function styles() {
      return {
          // assume I need to use global styles, my actual project is more
          // complex and for some reasons I need to use global styles
          '@global': {
              '.some-class': {
                  overflowX: 'hidden'
              },
          },
      }
  }
  </code></pre>
  
  <p>How do we type this?</p>
  
  <p>At first, it gives me an error like:</p>
  
  <pre><code>        Types of property 'overflowX' are incompatible.
            Type 'string' is not assignable to type '"scroll" | "hidden" | "visible" | "auto" | "clip" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | undefined'.
  </code></pre>
  
  <p>So I changed it to the following which uses <code>createStyles</code>:</p>
  
  <pre><code>import * as React from 'react'
  import { withStyles, createStyles } from '@material-ui/core'
  
  @withStyles(styles) // TYPE ERROR HERE
  export default class App extends React.Component&lt;{}, {}&gt; {
      render(): JSX.Element {
          return (
              &lt;div className="some-class"&gt; Hello &lt;/div&gt;
          )
      }
  }
  
  function styles() {
      return createStyles({
          // assume I need to use global styles, my actual project is more
          // complex and for some reasons I need to use global styles
          '@global': {
              '.some-class': {
                  overflowX: 'hidden'
              },
          },
      })
  }
  </code></pre>
  
  <p>And now I get this error:</p>
  
  <pre><code>tmp.tsx:5:1 - error TS1238: Unable to resolve signature of class decorator when called as an expression.
    Type 'ComponentClass&lt;Pick&lt;{}, never&gt; &amp; StyledComponentProps&lt;"@global"&gt;, any&gt;' is not assignable to type 'void | typeof App'.
      Type 'ComponentClass&lt;Pick&lt;{}, never&gt; &amp; StyledComponentProps&lt;"@global"&gt;, any&gt;' is not assignable to type 'typeof App'.
        Type 'Component&lt;Pick&lt;{}, never&gt; &amp; StyledComponentProps&lt;"@global"&gt;, any, any&gt;' is not assignable to type 'App'.
          Types of property 'render' are incompatible.
            Type '() =&gt; ReactNode' is not assignable to type '() =&gt; Element'.
              Type 'ReactNode' is not assignable to type 'Element'.
                Type 'undefined' is not assignable to type 'Element'.
  
  5 @withStyles(styles) // TYPE ERROR HERE
    ~~~~~~~~~~~~~~~~~~~
  </code></pre>
  
  <p>In my actual, more-complicated code, the error is similar, about not being able to match the <code>Component</code> type:</p>
  
  <pre><code>App.tsx:44:1 - error TS1238: Unable to resolve signature of class decorator when called as an expression.
    Type 'ComponentClass&lt;Pick&lt;AppProps, never&gt; &amp; StyledComponentProps&lt;"@global"&gt;, any&gt;' is not assignable to type 'void | typeof App'.
      Type 'ComponentClass&lt;Pick&lt;AppProps, never&gt; &amp; StyledComponentProps&lt;"@global"&gt;, any&gt;' is not assignable to type 'typeof App'.
        Type 'Component&lt;Pick&lt;AppProps, never&gt; &amp; StyledComponentProps&lt;"@global"&gt;, any, any&gt;' is not assignable to type 'App'.
          Property 'makeOnStatusWindowClick' is missing in type 'Component&lt;Pick&lt;AppProps, never&gt; &amp; StyledComponentProps&lt;"@global"&gt;, any, any&gt;'.
  
  44 @withStyles(styles)
     ~~~~~~~~~~~~~~~~~~~
  </code></pre>
  
  <p>where <code>makeOnStatusWindowClick</code> is the very first method defined in my component class.</p>