Repository: material-ui
Issue: [system] Typing changed between 5.14.0 and 5.14.1 and later, when overriding an overridable property using styled
Labels: bug 🐛,typescript,package: system,ready to take

### Duplicates

- [X] I have searched the existing issues

### Latest version

- [X] I have tested the latest version

### Steps to reproduce 🕹

No error on `5.14.0`: https://codesandbox.io/s/issue-38626-5-14-0-q8xyfk

Error on `5.14.1`: https://codesandbox.io/s/issue-38626-5-14-1-n7z85w?file=/src/App.tsx

Local repro steps:

1. `npx create-react-app mui-foo-chip --template typescript`
2. `npm i @mui/material@5.14.0 @emotion/react @emotion/styled`
3. Replace the `src/index.tsx` with code below
4. run `./node_modules/typescript/bin/tsc --noEmit` - no typing errors
5. Install 5.14.1: `npm i @mui/material@5.14.1`
6. run `./node_modules/typescript/bin/tsc --noEmit` again

```tsx
// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { CSSInterpolation } from '@mui/system';
import {
  Chip,
  ChipProps,
  ThemeProvider,
  alpha,
  createTheme,
  styled,
} from '@mui/material';
import App from './App';

export interface FooChipProps extends Omit<ChipProps, 'color'> {
  color?: ChipProps['color'] | 'peace';
}

export const FooChip = styled(
  Chip, {
    name: 'FooChip',
    slot: 'root',
    // Note the `propName is keyof ...` construct is important here since we we'll not
    // propagate the color prop to the underlying Chip and omitted we'd get typing error on the FooChip component
    shouldForwardProp: (propName: string): propName is keyof Omit<ChipProps, 'color'> => propName !== 'color',
    overridesResolver: (props, styles) => [styles.root, styles[props.color || 'default']],
  },
)<FooChipProps>(null);

declare module '@mui/material/styles' {
  export interface Components<Theme = unknown> {
    FooChip?: {
      styleOverrides?: { peace: CSSInterpolation };
    },
  }
}

const fooTheme = createTheme({
  components: {
    FooChip: {
      styleOverrides: {
        peace: {
          backgroundColor: alpha('#2fbcc6', 0.2),
          color: '#209ba4',
        },
      },
    },
  },
});

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <ThemeProvider theme={fooTheme}>
      <FooChip color="peace" label="A Foo chip" />
    </ThemeProvider>
  </React.StrictMode>
);
```

### Current behavior 😯

With 5.14.1 and later version you'll get the typescript error:

`error TS2322: Type '"peace"' is not assignable to type '"default" | "primary" | "secondary" | "error" | "info" | "success" | "warning" | undefined'.`

### Expected behavior 🤔

I expected no typescript error.

### Context 🔦

We want to re-use in this case the Chip component, but it will also have other properties such as emphasised and more states, hence we need to wrap the Chip component and at the same time we don't want to change Mui's own Chip component.

### Your environment 🌎

<details>
  <summary><code>npx @mui/envinfo</code></summary>

```
npx @mui/envinfo
Need to install the following packages:
  @mui/envinfo@2.0.9
Ok to proceed? (y) 

  System:
    OS: macOS 12.6.8
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Browsers:
    Chrome: 116.0.5845.96
    Edge: Not Found
    Safari: 16.6
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.11 
    @mui/core-downloads-tracker:  5.14.5 
    @mui/material: ^5.14.5 => 5.14.5 
    @mui/private-theming:  5.14.5 
    @mui/styled-engine:  5.13.2 
    @mui/system:  5.14.5 
    @mui/types:  7.2.4 
    @mui/utils:  5.14.5 
    @types/react: ^18.2.21 => 18.2.21 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^4.9.5 => 4.9.5 

tsconfig.json (as it comes with the create-react-app):
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}
```
</details>