Use of WithStyles forces "classes" attribute to be present in TypeScript [has workaround]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When using withStyles to add style to a component, and WithStyles<typeof styles> to describe the props for the component, the user of the component is forced to provide the classes prop otherwise they get a type error.

Expected Behavior 🤔

The user of my component should not be required to provide a classes prop.

Steps to Reproduce 🕹

No repro to share yet, but looks like similar to https://github.com/mui-org/material-ui/issues/10022.

It isn’t clear what to do to make classes optional. Seems like having to add a type for it in my props definition is too complicated (how am I supposed to know how to type it? I want to leave that to material-ui)

Unless I missed it, the docs don’t explain this part.

Your Environment 🌎

Tech	Version
Material-UI	v3.5.1
React
Browser
TypeScript
etc.

[eps1lon]

But my question is, why does material-ui’s WithStyles force the classes prop?

Because that prop is injected by withStyles. WithStyles should only be used for components that are intended to be wrapped in withStyles.

[Romex91]

I faced this issue running this code:

import React from "react";
import { withStyles, createStyles, WithStyles, Theme } from "@material-ui/core";

const styles = (theme: Theme) =>
  createStyles({
    scrollableContainer: {
      background: (props: Props) => (props.example ? "black" : "blue"),
    },
  });

interface Props extends WithStyles<typeof styles> {
  example: boolean;
}

const Demo = withStyles(styles)(
  class extends React.PureComponent<Props> {
    render() {
      return (
        <div className={this.props.classes.scrollableContainer}>dadadadada</div>
      );
    }
  }
);

export default Demo;

See how |styles| and |Props| make a circular dependency. The error message is confusing since the problem is irrelevant to |classes| field.

Solution If you face this issue do NOT think that something is wrong with Material-UI/Typescript/React, most likely there is some crazy shit in your code. In my case the solution is changing background: (props: Props) to background: (props: {example:boolean})