[typescript] Make the classes property nullable in withStyles

[ssalbdivad]

Problem:
The classes prop seems to be nullable elsewhere but not yet in withStyles, forcing components that consume withStyles to pass a classes prop.

Solution:
Make classes nullable in #withStyles.

Resolves #8267

[oliviertassinari]

Also, could you add a test with your use case under this file: https://github.com/callemall/material-ui/blob/914b8bec96cbc8d04552b5e66dc9acbc99616636/test/typescript/components.spec.tsx so we don't introduce future regression. Thanks

[ssalbdivad]

Will add a test tonight, thanks for pointing me in the right direction!

[pelotom]

I think #8320 solves this problem as well.

[ssalbdivad]

I still don't feel this is quite right. It seems like ideally the classes prop is optionally passed down but should not be null by the time you are in the element itself so it can be safely referenced. The approach from this CR works but I have to specify something like className={classes ? classes.root : ""} in my TSX to avoid a complain from TS if strict null checks is on, which is also kind of gross. Maybe because I'm new to the ecosystem in general I just don't have a lot of clarity or intuition around using material-ui styles with TS. Any suggestions here?

[pelotom]

@ssalbdivad I think the problem you're running up against is that a correct typing of withStyles needs to mutate the type of the component, transforming it from the implementation view where classes definitely exists, to the usage view where classes doesn't need to exist (it's only an optional override). Unfortunately TypeScript decorators can't do that currently.

[pelotom]

Leaving aside using withStyles as a decorator, which I think for the time being in TypeScript is a bad idea due to the aforementioned issue... if you use the typing I provide in #8320 your testcase becomes something like

import * as React from 'react'
import { withStyles, WithStyles } from 'material-ui'

const styles = (theme: {}) => ({
  root: {
    color: 'aqua',
  },
})

type NoClassesRequiredProps = WithStyles<{
  bestComponentLibrary: string
}, 'root'>

class NoClassesRequiredWrapped extends React.Component<NoClassesRequiredProps> {
  render() {
    return (
      <div className={this.props.classes.root}>
        {this.props.bestComponentLibrary}
      </div>
    )
  }
}

const NoClassesRequired = withStyles(styles)(NoClassesRequiredWrapped)

<NoClassesRequired bestComponentLibrary="MUI" />

or more simply as a stateless functional component:

const NoClassesRequired = withStyles(styles)<{ bestComponentLibrary: string }>(props => (
  <div className={props.classes.root}>
    {props.bestComponentLibrary}
  </div>
))

<NoClassesRequired bestComponentLibrary="MUI" />

[oliviertassinari]

@pelotom Let's move forward with #8320. Do we have to add a new test case to your PR?
@ssalbdivad Thanks for your time :)