Question regarding latest (beta.43) WithStyles update.

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

Expected Behavior

Sample code to compile.

Current Behavior

does not compile with that error

Type '{ caption: string; }' has no properties in common with type 'IntrinsicAttributes & StyledComponentProps<"content"> & { children?: ReactNode; }'.

Steps to Reproduce (for bugs)

1. Try to compile the sample code

import { withStyles, WithStyles } from 'material-ui';
import * as React from 'react';
import './App.css';

interface IStyle {
  content: any;
}

interface IComponentProps {
  caption: string;
}

type ComponentProps = IComponentProps & WithStyles<'content'>;

const decorate = withStyles((theme): IStyle => ({
  content: {
    margin: 4
  }
}));

const Component = (props: ComponentProps) => {
  return <div className={props.classes.content}>Hello {props.caption}</div>
}

const StyledComponent = decorate(Component);

class App extends React.Component {
  public render() {
    return (
      <div className="App">
        <StyledComponent caption="Developer" />
      </div>
    );
  }
}

export default App;

Context

The sample code was compiling fine before beta.43 update. Now I need to change

const StyledComponent = decorate(Component);

line as

const StyledComponent = decorate<IComponentProps>(Component);

to make it compile without errors.

I’m not sure if it is a bug or an intentional change so I wanted to ask before attempting to change my all styled components. I think this probably relates with https://github.com/mui-org/material-ui/pull/11003

Your Environment

Tech	Version
Material-UI	v1.0.0-beta.43
React	16.3.2
browser	Chrome
typescript	2.8.3

[pelotom]

I have a solution which solves all known edge cases, but requires TypeScript 2.8. See #11280, and feel free to comment there. I’d like to get a sense from the users whether 2.8 is an acceptable baseline.

[estaub]

Ok, let me explain a bit.

The reason it fails without strictFunctionTypes in the theme case is because functions are bivariantly equivalent in that case, and this affects whether the first alternative in the withStyles overload pair is deemed valid.

It reads

(component: React.ComponentType<WithStyles<ClassKey>>): React.ComponentType<
    StyledComponentProps<ClassKey>
  >;

and question is whether the parameter declaration in usage

(props: IComponentProps & WithStyles<'content'>) => {
 return <div>...</div>
}

matches the withStyles declaration’s parameter

component: React.ComponentType<WithStyles<ClassKey>>

With bivariance (without strictFunctionTypes) Typescript asks the wrong question: it asks:

Does IComponentProps & WithStyles<'content'> extend WithStyles<ClassKey>?

which of course is true, but not the right question. With contravariance (with strictFunctionTypes), the opposite question is asked:

Does WithStyles<ClassKey> extend IComponentProps & WithStyles<'content'> ?

which is false, and what we want.

This may seem backward, until you think about it in the context of being a function argument, which is exactly what strictFunctionTypes is about. See https://www.stephanboyer.com/post/132/what-are-covariance-and-contravariance for a good writeup. Abbreviated, the question is:

If Dog extends Animal and I have a function f(dog:Dog), should it accept any old Animal?

With strictFunctionTypes, the answer is “No, we only do Dogs (or any subtype)”; without it, the answer is “Sure, it might work”.