[typescript] Make StyledComponent only a type, not a class

[pelotom]

In the current TypeScript typings, StyledComponent is defined as a class which extends React.Component, which doesn't reflect the reality of the underlying JS code. This leads one to believe that one can extend StyledComponent as if it were a class, which it's not:

import { StyledComponent } from 'material-ui'

class Foo extends StyledComponent {
  render() { return <div>hi</div> }
}

<Foo />

The above will pass the type checker but lead to a runtime error, because no value StyledComponent is actually exported from material-ui.

By extension, all the material-ui components are defined as being classes which extend this base class, but

1. many of them are just functional components, not classes at all
2. even the ones which are classes directly extend React.Component, not StyledComponent which is not actually a class.

This PR fixes the typing of StyledComponent by declaring it to just be a type, not a class, and changes all components to not extend that type, but simply to have that type.

[oliviertassinari]

This was quick!

[pelotom]

@oliviertassinari Regex find/replace is my friend 😆

[vyrotek]

This might be a dumb question. Given the example below (extend from the test in the PR) is this going to be the right way to expose multiple classes?

Is specifying 'root' | 'other' | (etc...) on StyledComponentProps<'root' | 'other'> the only way to expose each class defined on the styles? Or am I misunderstanding some TS or JSS concept?

const styles = (theme: {}) => ({
    root: {
        color: 'aqua'
    },
    other: {
        backgroundColor: 'red'
    }
});

@withStyles(styles)
class DecoratedComponent extends React.Component<NonStyleProps & StyledComponentProps<'root' | 'other'>> {
  render() {
    const { classes, text } = this.props;
    return (
      <div className={classes!.root}>
        {text}
        <div className={classes!.other}>
           {text}
        </div>
      </div>
    );
  }
}

[pelotom]

Yes, I’d say that’s the best way to do it currently.

[sebald]

Thx for fixing that, this was some debt, when the StyledComponent wasn't exposed publicly!