makeStyles overload breakage with TypeScript 4.1

[danvk]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate. Possibly "TS2554: Expected 1 arguments, but got 0." on hook returned by makeStyles #14018

Current Behavior 😯

With today's TypeScript 4.1 release, there's an issue with makeStyles that pops up:

import {createStyles, makeStyles} from '@material-ui/core/styles';
import React from 'react';

export function HeaderBreadcrumbs() {
  const classes = useStyles();
  //              ~~~~~~~~~~~ Expected 1 arguments, but got 0. ts(2554)
  return <div className={classes.outer}>Hello!</div>;
}

const useStyles = makeStyles(theme =>
  createStyles({
    outer: {
      '& .MuiLink-root': {
        ...theme.typography.h6,  // this line is key!
        color: 'inherit',
      },
    },
  }),
);

This passes the type checker with TS 4.0 but not TS 4.1, where you get this error:

Expected 1 arguments, but got 0. ts(2554)
An argument for 'props' was not provided.

This is being tracked on the TypeScript side over here: microsoft/TypeScript#41099

Unclear to me if this is a TS problem or a MUI problem, but it can't hurt to have linked issues on both repos!

Expected Behavior 🤔

No type error (the code works fine at runtime)

Steps to Reproduce 🕹

See code above and in linked issue.

Context 🔦

TypeScript 4.1 update

Your Environment 🌎

Tech	Version
Material-UI	v4.11.0
React	16.13.1
Browser	n/a
TypeScript	4.1.2
etc.

[kahirokunn]

I got same problem. 😢

[kahirokunn]

I tried fix node_modules/@material-ui/core/styles/makeStyles.d.ts for debug.

/**
 * `makeStyles` where the passed `styles` do not depend on props
 */
export default function makeStyles<Theme = DefaultTheme, ClassKey extends string = string>(
  style: Styles<Theme, {}, ClassKey>,
  options?: Omit<WithStylesOptions<Theme>, 'withTheme'>
): (props?: any) => ClassNameMap<ClassKey>;
/**
 * `makeStyles` where the passed `styles` do depend on props
 */
export default function makeStyles<
  Theme = DefaultTheme,
  Props extends {} = {},
  ClassKey extends string = string
>(
  styles: Styles<Theme, Props, ClassKey>,
  options?: Omit<WithStylesOptions<Theme>, 'withTheme'>
): (
- props: Props
+ props?: Props
) => ClassNameMap<ClassKey>;

Type error was solved.

[eps1lon]

Can confirm in our own codebase now. We actually do run tests with TS canaries. But this particular error was hidden by another, less severe error. In the future we should be able to anticipate these regressions better.

[ahwise]

Experiencing the same issue; where the culprit for me was ...theme.mixins.toolbar

spreading the object ...theme.mixins.toolbar gives

  @media (min-width:0px) and (orientation: landscape): {minHeight: 48}
  @media (min-width:600px): {minHeight: 64}
  minHeight: 56

so for now ive just appended those lines in place of the spread

    '& @media (min-width:0px) and (orientation: landscape)': { minHeight: 48 },
    '& @media (min-width:600px)': { minHeight: 64 },
     minHeight: 56

[ldrick]

Can this be fixed in Version 4, please?

[oliviertassinari]

@ldrick Do you want to open a pull request for it on master?

[oliviertassinari]

Can this be fixed in Version 4, please?

Done #23692. It's unclear when we will release the changes. The simplest would be to wait around Q1 2021 https://twitter.com/olivtassinari/status/1328346262505205768. So we have enough deprecations to release.

[kahirokunn]

I want to use of the combination of Typescript 4.1 and Material-UI as soon as possible, do you have any ideas?

[Primajin]

Ahh that's a bummer - I was also hoping for a soon v4 release of this as we will need to work on many upgrades like Typescript 4.1, react 17, ... and preparing for the Material UI v5 release 🎉 . Waiting until Q1 would mean also hold off on all other upgrades and then we would need to do all at once 🙈 - so if there is away (other than sprinkling @ts-ignores over all components) that would be much appreciated 🙏🏻

[oliviertassinari]

Yeah, in hindsight, I think that we will do something this week. We still need to add support for React v17 and we can release.

[oliviertassinari]

https://github.com/mui-org/material-ui/releases/tag/v4.11.1