material-ui: 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:

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.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 9
Comments: 21 (13 by maintainers)

Commits related to this issue

[types] Fix discrepancy between core and system `ThemeOptions` Fixes #27139. — committed to fmeum/material-ui by fmeum 3 years ago
[types] Fix discrepancy between core and system `ThemeOptions` Fixes #27139. — committed to fmeum/material-ui by fmeum 3 years ago

Most upvoted comments

@vishalrajole Interesting, @mnajdova I see 3 solutions:

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 {

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.

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.

+12

oliviertassinari on Oct 30, 2021

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.

mnajdova on Oct 20, 2021

Would be great if someone can share a reproduction. For example, is the zIndex the only problem? Should we also exclude the components and palette keys? Will the same happen for the Theme interface too?

This is the only type error I am seeing with my codebase. I could try to develop a reproducer for this, but I don’t think this would reliably uncover other potential type issues.

fmeum on Dec 7, 2021

I just submitted https://github.com/mui-org/material-ui/pull/30095 to get this fixed.

fmeum on Dec 7, 2021

solved it by adding "skipLibCheck": true to compilerOptions in tsconfig.json file. Weird.

vishalrajole on Jul 6, 2021

Same issue also observed on @material-ui/core: 5.0.0-beta.0 version

vishalrajole on Oct 30, 2021