createTheme throwing type errors with typescript

createTheme is throwing compile time error

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

node_modules/@material-ui/core/styles/createTheme.d.ts:10:18 - error TS2430: Interface 'import("/Users/vrajole/sg-core/frontend-monorepo/packages/lib/auth/node_modules/@material-ui/core/styles/createTheme").ThemeOptions' incorrectly extends interface 'import("/Users/vrajole/sg-core/frontend-monorepo/packages/lib/auth/node_modules/@material-ui/system/createTheme/createTheme").ThemeOptions'.
  Types of property 'zIndex' are incompatible.
    Type 'Partial<ZIndex> | undefined' is not assignable to type 'Record<string, number> | undefined'.
      Type 'Partial<ZIndex>' is not assignable to type 'Record<string, number>'.
        Property 'mobileStepper' is incompatible with index signature.
          Type 'number | undefined' is not assignable to type 'number'.
            Type 'undefined' is not assignable to type 'number'.

10 export interface ThemeOptions extends SystemThemeOptions {
                    ~~~~~~~~~~~~


Found 1 error.

error Command failed with exit code 1.

Expected Behavior 🤔

Steps to Reproduce 🕹

Steps:

1. Use material ui mentioned version with typescript (No need to create new theme)

Context 🔦

Your Environment 🌎

@material-ui/core: 5.0.0-alpha.37,
@material-ui/icons: 5.0.0-alpha.37,
Node: 15.8.0 
Yarn: 1.22.4
npm: 7.17.0 

`npx @material-ui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @material-ui/envinfo` goes here.

[oliviertassinari]

@vishalrajole Interesting, @mnajdova I see 3 solutions:

1. We allow undefined in the system createTheme()

diff --git a/packages/material-ui-system/src/createTheme/createTheme.d.ts b/packages/material-ui-system/src/createTheme/createTheme.d.ts
index 9b9d1c2e8b..c6f1f72054 100644
--- a/packages/material-ui-system/src/createTheme/createTheme.d.ts
+++ b/packages/material-ui-system/src/createTheme/createTheme.d.ts
@@ -17,7 +17,7 @@ export interface ThemeOptions {
   transitions?: unknown;
   components?: Record<string, any>;
   typography?: unknown;
-  zIndex?: Record<string, number>;
+  zIndex?: Record<string, number | undefined>;
 }

 export interface Theme {

1. We don’t allow undefined in the core createTheme(): https://github.com/mui-org/material-ui/blob/2d530cde534deda0651ed32d56fa0f40c4afc38b/packages/material-ui/src/styles/zIndex.d.ts#L11

https://stackoverflow.com/questions/54489817/typescript-partialt-type-without-undefined.

1. When we merge the two, we omit zIndex.

diff --git a/packages/material-ui/src/styles/createTheme.d.ts b/packages/material-ui/src/styles/createTheme.d.ts
index 26280d93c0..080a4db73c 100644
--- a/packages/material-ui/src/styles/createTheme.d.ts
+++ b/packages/material-ui/src/styles/createTheme.d.ts
@@ -7,7 +7,7 @@ import { Transitions, TransitionsOptions } from './createTransitions';
 import { ZIndex, ZIndexOptions } from './zIndex';
 import { Components } from './components';

-export interface ThemeOptions extends SystemThemeOptions {
+export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'> {
   mixins?: MixinsOptions;
   components?: Components;
   palette?: PaletteOptions;

PR welcome.

[mnajdova]

Hi, I’d like to take this issue. Is there a preference for any of these 3 solutions, @oliviertassinari?

@oliveirag thanks for the interest and sorry for the late response. I would go with Option 3 😃 Feel free to grab it if you are still interested.