Typescript: Types for withStyles() - forced to set classes-property

Usage of the withStyles()-function enforces setting the classes property.

TS doesn’t seem to split WithStyles<ClassKey> from P. This could be seen as a typescript-fault, but I think it can easily be fixed within the type definition.

export default function withStyles<ClassKey extends string>(
  style: StyleRules<ClassKey> | StyleRulesCallback<ClassKey>,
  options?: WithStylesOptions,
): <P>(
  component: React.ComponentType<P & WithStyles<ClassKey>>,
) => React.ComponentType<P & StyledComponentProps<ClassKey>>;

One could replace

<P>(
  component: React.ComponentType<P & WithStyles<ClassKey>>,
) => React.ComponentType<P & StyledComponentProps<ClassKey>>;

with

import { Omit } from 'material-ui/index';

<P extends WithStyles<ClassKey>>(
component: React.ComponentType<P>
) => React.ComponentType<Omit<P, keyof WithStyles>> & StyledComponentProps<ClassKey>;

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

Expected Behavior

• Compile without error

Current Behavior

(55,17): error TS2322: Type ‘{}’ is not assignable to type ‘(IntrinsicAttributes & IntrinsicClassAttributes<Component<{ classes: any; } & StyledComponentProp…’. Type ‘{}’ is not assignable to type ‘IntrinsicAttributes & { classes: any; } & StyledComponentProps<never> & { children?: ReactNode; }’. Type ‘{}’ is not assignable to type ‘{ classes: any; }’. Property ‘classes’ is missing in type ‘{}’.

Steps to Reproduce (for bugs)

const Test = withStyles({})((props: { classes: any }) => <div/>);
const App = () => <Test />

Your Environment

Tech	Version
Material-UI	1.0.0-beta.30
React	16.2.0
browser	none / compile-error
typescript	2.6.2

[xcaptain]

I also came across this problem, I’m using typescript 2.8.1, solved by using

const styles = {root: {}};
interface TestProps {
    classes?: any;
}
const Test = withStyles(styles)<TestProps>(props => (
<div className={props.classes.root}>Hello</div>
));
const App = () => <Test />

and set no-any: false in tslint.json, no need to change tsconfig.json.

But still looking forward a better solution.

[laaksomavrick]

I was having issues using withStyled as a HOC with stateless components. I fixed the issue as follows:

const styled = withStyles(theme => ({
  container: {...},
  paper: {...},
}));

interface Props extends HTMLAttributes<HTMLDivElement> {
  classes: any;
}

const StatelessComponent = ({ classes, children }: Props) => (
  <div className={classes.container}>
    <Paper className={classes.paper}>{children}</Paper>
  </div>
);

export default styled(StatelessComponent);