Wrong TS type infered for object created using createUseStyles

Expected behavior:

Given the following snippet:

const useStyles = createUseStyles((theme) => ({
  SectionTitle: {
    color: theme.color, // Commenting out this line fixes the bug

    // Bullet
    "&:before": {
      content: (props: JssProps) => `"${props.number}"`,
      border: [1, "solid", "black"]
    }
  }
}));

The type should be:

const useStyles: (data?: JssProps & {
    theme?: Jss.Theme;
}) => Record<"SectionTitle", string>

But instead, it’s:

const useStyles: (data?: {
    theme?: Jss.Theme;
}) => Record<"SectionTitle", string>

Describe the bug:

This only occurs in a very specific case:

• We use the theme in the JSS
• The Theme is not correctly defined (any)

My theme is actually generated by a webpack plugin, that’s why the type not precise.

Reproduction:

https://codesandbox.io/s/bug-type-jss-j5gkw

Versions (please complete the following information):

• jss: 10.6.0
• Browser [e.g. chrome, safari]: Chrome / FireFox
• OS [e.g. Windows, macOS]: Linux

[pip8786]

Yes that fixes it but like I said, this was one simple example of many places where this errors out. I’m not sure I want to specify every single classname coming out of the createUseStyles() just to get typed props. Based on the discussions i read around this issue, it sounds like this may be avoidable in the future if Typescript fixes some issues, so I think for our project we rather wait until that happens and stick to 10.5.0 for now.

Was I wrong about Material UI having figured this out? I know I didn’t specify class names coming out of that but had props completion as well classnames, I think.

[ITenthusiasm]

Yeah. I guess I’m not surprised. This is a pretty bothersome bind that TypeScript puts us in. I really really hoping it gets resolved in the near future.