[styles] Add support for TypeScript 4.1 (#23692)

package.json

@@ -41,7 +41,7 @@
     "test:umd": "node packages/material-ui/test/umd/run.js",
     "test:unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.js' 'docs/**/*.test.js' 'scripts/**/*.test.js' --exclude '**/node_modules/**'",
     "test:watch": "yarn test:unit --watch",
-    "typescript": "lerna run typescript --parallel"
+    "typescript": "lerna run --no-bail --parallel typescript"
   },
   "devDependencies": {
     "@babel/cli": "^7.10.1",

packages/material-ui-styles/src/makeStyles/makeStyles.d.ts

@@ -7,21 +7,13 @@ import {
 import { Omit } from '@material-ui/types';
 import { DefaultTheme } from '../defaultTheme';
 
-/**
- * `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 {} = {},
+  Props extends object = {},
   ClassKey extends string = string
 >(
   styles: Styles<Theme, Props, ClassKey>,
   options?: Omit<WithStylesOptions<Theme>, 'withTheme'>
-): (props: Props) => ClassNameMap<ClassKey>;
+): keyof Props extends never // `makeStyles` where the passed `styles` do not depend on props
+  ? (props?: any) => ClassNameMap<ClassKey> // `makeStyles` where the passed `styles` do depend on props
+  : (props: Props) => ClassNameMap<ClassKey>;

packages/material-ui-styles/src/makeStyles/makeStyles.spec.tsx

@@ -81,7 +81,7 @@ import { createStyles, makeStyles } from '@material-ui/styles';
   );
 
   const UnsafeProps = (props: StyleProps) => {
-    // would be nice to have at least a compile time error because we forgot the argument
+    // @ts-expect-error
     const classes = useUnsafeProps(); // runtime: Can't read property color of undefined
     // but this would pass anyway
     const alsoClasses = useUnsafeProps(undefined); // runtime: Can't read property color of undefined

packages/material-ui/src/styles/makeStyles.d.ts

@@ -3,21 +3,13 @@ import { ClassNameMap, Styles, WithStylesOptions } from '@material-ui/styles/wit
 
 import { Omit } from '@material-ui/types';
 
-/**
- * `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 {} = {},
+  Props extends object = {},
   ClassKey extends string = string
 >(
   styles: Styles<Theme, Props, ClassKey>,
   options?: Omit<WithStylesOptions<Theme>, 'withTheme'>
-): (props: Props) => ClassNameMap<ClassKey>;
+): keyof Props extends never // `makeStyles` where the passed `styles` do not depend on props
+  ? (props?: any) => ClassNameMap<ClassKey> // `makeStyles` where the passed `styles` do depend on props
+  : (props: Props) => ClassNameMap<ClassKey>;