TS typings are not working for styled components

[rolandjitsu]

After I have updated to the latest version of the lib (3.2.0), I cannot build my apps anymore with react-scripts-ts due to some typings errors with styled components.

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

Expected Behavior

I should be able to build a component that is styled:

import React from 'react';

import {
    createStyles,
    Theme,
    withStyles,
    WithStyles
} from '@material-ui/core/styles';

const styles = (theme: Theme) => createStyles({
    root: {
        color: 'red'
    }
});

const style = withStyles(styles);

class Hello extends React.Component<Props, {}> {
  render() {
      const {classes} = this.props;
    return (
        <div className={classes.root}>
            <h1>Hello :)</h1>
        </div>
    );
  }
}

export default style<Props>(Hello);

type Props = WithStyles<typeof styles>;

Current Behavior

It fails during compilation with:

(29,22): Type '{ classes: Record<"root", string>; innerRef?: string | ((instance: any) => any) | RefObject<any> ...' does not satisfy the constraint 'ComponentType<never>'.
  Type '{ classes: Record<"root", string>; innerRef?: string | ((instance: any) => any) | RefObject<any> ...' is not assignable to type 'StatelessComponent<never>'.
    Type '{ classes: Record<"root", string>; innerRef?: string | ((instance: any) => any) | RefObject<any> ...' provides no match for the signature '(props: never, context?: any): ReactElement<any> | null'.

Steps to Reproduce

Link: https://github.com/rolandjitsu/mui-ts-sfc

1. Clone repo and run yarn install at root
2. Run yarn start
3. See errors

Context

I'm building some react app using TS with react-scripts-ts and I'm trying to style a component according to docs.

Your Environment

Tech	Version
Material-UI	v3.2.0
React	v16.3.2
Browser	Chrome
TypeScript	v2.9.2
etc.

[rolandjitsu]

Hmmm ... maybe it's actually not an issue, removing the type cast from style<Props>(Hello) might just fix this issue.

I'm testing this just now.

[eps1lon]

You are not following the guide closely. The generic argument for the returntype of withStyles has to be a component not the props (changed in #12673).

[rolandjitsu]

@eps1lon is this documented in the official docs? Because what's in typescript doesn't really work for me. Well, the VSC autocomplete does not pickup on the props that I have declared, but ts-loader seems to not care.

So when using the component that's styled somewhere:

<div>
  <MyComp open={true} />
</div>

The {open} property does not show up during autocomplete. But inside MyComp, the props is visible.

I've removed the type invocation as the PR pointed out, but that did not change the behaviour I'm describing.

[rolandjitsu]

I wonder if this could be related to workspaces, as the other project where I experience this, is actually a monorepo with a couple apps.

[eps1lon]

"doesn't really work for me" is not something I can debug. You repro still has Props as the generic argument. We don't explicitly document it because TS should have no issues inferring it.

I cloned your repro and after the applied fix VSCode has no issues suggesting props via autocomplete.

I will add an example boilerplate for components with TS and material-ui that worked fined for me for the past months with virtually zero runtime overhead. Edit: It's probably better to link to the test suite for withStyles in our docs. Less opinionated and automatically tested.

[rolandjitsu]

@eps1lon sorry, I know that cannot be reproduced 😄 I tried to replicate what I experienced, in my own project, in the repo I referenced, but with little success 😞

That's why I closed the issue previously, because the small example in that repo worked just fine after I removed the type cast.

I'll give it another try to see what's different between the small example and my project setup and if I cannot find anything I will just close this issue.

[zharris6]

@rolandjitsu Did anything ever come of this? I am experiencing the exact same issue that you are describing.

Keeping the cast on withStyles will break the compiler. taking the cast off withStyles prevents any autocomplete and type safety that TypeScript is supposed to give you.

I did reference this post, which seems to describe breaking change but I am struggling to find the correct syntax that will give me type safety and not break compilation.

for example, what does this become?

export default withStyles<Props>(styles)(CustomMenu);