Can't combine multiple augments

[hon2a]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/suspicious-forest-6nq4bx?file=/src/App.tsx

Note that this is a typing issue only, it crashes tsc but compiles and works with babel.

Steps:

1. Create multiple files containing module augmentation that adds support for a new color to Chip.

Code:

augment-1.d.ts

import '@mui/material/Chip';

declare module '@mui/material/Chip' {
  interface ChipPropsColorOverrides {
    foo: true;
  }
}

augment-2.d.ts

import '@mui/material/Chip';

declare module '@mui/material/Chip' {
  interface ChipPropsColorOverrides {
    bar: true;
  }
}

Component.tsx

// works, because it's the first augment (by filename, alphabetical order)
const Foo = () => <Chip color="foo" label="Foo" />

// creates a type error, because `bar` is added in the second augment
const Bar = () => <Chip color="bar" label="Bar" />

Current behavior 😯

Only one of the files containing module augmentation appears to be used for the ChipProps inference. If there are multiple augmentations within that same file, they are all taken into account. The augmentations from other file(s) are not. This leads to a type error:

TS2769: No overload matches this call.   Overload 1 of 2, '(props: { component: ElementType<any>; } & { avatar?: ReactElement<any, string | JSXElementConstructor<any>> | undefined; children?: null | undefined; ... 10 more ...; variant?: "filled" | ... 1 more ... | undefined; } & CommonProps & Omit<...>): Element', gave the following error.     Type '"bar"' is not assignable to type '"error" | "success" | "foo" | "default" | "primary" | "secondary" | "info" | "warning" | undefined'.   Overload 2 of 2, '(props: DefaultComponentProps<ChipTypeMap<{}, "div">>): Element', gave the following error.     Type '"bar"' is not assignable to type '"error" | "success" | "foo" | "default" | "primary" | "secondary" | "info" | "warning" | undefined'.

Expected behavior 🤔

All available augments should be taken into account equally, so that it's possible to use Chip with any of the added colors (this applies to all other similarly overridable props of all components as well) without producing any errors.

If the above is not possible with the current TypeScript functionality, a different pattern should be made available for these overrides.

Context 🔦

As a company, we're building a "MUI theme" package that contains re-styling of MUI to match our brand. This includes extending the theme with additional colors, etc., and support for those in the various component props. The typing augments for the various MUI components are provided as part of this theme package.

The theme package is then to be used in the various app packages. Each app might have its own domain-specific needs that necessitate further extensions to the theme. This issue makes it impossible to add app-specific extensions on top of the library package extensions. The only work-around is to avoid importing the augments and instead copy-paste them into the app package directly and then extend them in place, so that all augments are in the same file.

Your environment 🌎

npx @mui/envinfo

System:
    OS: macOS 12.6
Binaries:
  Node: 17.7.1 - ~/.nvm/versions/node/v17.7.1/bin/node
  Yarn: 1.22.19 - ~/.nvm/versions/node/v17.7.1/bin/yarn
  npm: 8.5.2 - ~/.nvm/versions/node/v17.7.1/bin/npm
Browsers:
  Chrome: 107.0.5304.87
  Edge: Not Found
  Firefox: Not Found
  Safari: 16.0

This is a TypeScript typing issue, used browser is immaterial.

[michaldudak]

Duplicate of #31366