PigmentCSS `createTheme`. Invalid typings in `styleOverrides`

[o-alexandrov]

Steps to reproduce

Link to live example

Steps:

1. Clone
2. Refer to vite.config.ts

Current behavior

components[string].styleOverrides has invalid typings. No typings errors are presented to the user.

Expected behavior

There should be an error for styleOverrides.extended usage in vite.config.ts file from the repro.

Context

• https://github.com/mui/pigment-css/issues/170#issuecomment-2245310638

Your environment

npx @mui/envinfo

``` System: OS: macOS 15.0.1 Binaries: Node: 22.9.0 - /opt/homebrew/bin/node npm: 10.8.3 - /opt/homebrew/bin/npm pnpm: 9.9.0 - /opt/homebrew/bin/pnpm Browsers: Chrome: 129.0.6668.91 Edge: 112.0.1722.39 Safari: 18.0.1 npmPackages: @emotion/react: 11.13.3 @emotion/styled: 11.13.0 @mui/core-downloads-tracker: 6.1.3 @mui/material: latest => 6.1.3 @mui/material-pigment-css: latest => 6.1.3 @mui/private-theming: 6.1.3 @mui/styled-engine: 6.1.3 @mui/system: 6.1.3 @mui/types: 7.2.18 @mui/utils: 6.1.3 @pigment-css/react: 0.0.24 @pigment-css/vite-plugin: latest => 0.0.24 @types/react: latest => 18.3.11 react: latest => 18.3.1 react-dom: latest => 18.3.1 typescript: latest => 5.6.3 ```

Search keywords: pigment, styleOverrides, typings, invalid, createTheme

[sai6855]

@o-alexandrov I don't think typing is invalid, as whatever styles applied in extended in styleOverides get's applied to Fab here: https://github.com/mui/material-ui/blob/9b9f562c6b29341e145a734865894a56f7fd0236/packages/mui-material/src/Fab/Fab.js#L45

In below sandbox, i passed bgcolor as red in extended and same got applied.

https://stackblitz.com/edit/react-or6bk2?file=Demo.tsx

[o-alexandrov]

@sai6855 you misunderstood the highlighted problem. In your repro, you are not using PigmentCSS. Please refer to breaking changes when migrating to PigmentCSS, the variants part of the migration guide.

You could also consider to review the linked issue. That’ll give more details

[brijeshb42]

I just cloned and tried to repro the typing error from your repo but all the typechecks passed. Could you post a screenshot or cli command or something else that shows the error ? I might be missing something in the repro.

[o-alexandrov]

@brijeshb42 type check shouldn't be passing. Please refer to the description of this issue:

There should be an error for styleOverrides.extended usage in vite.config.ts file from the repro.

[brijeshb42]

I ran typecheck through cli -

tsc -p tsconfig.node.json

and

tsc -p tsconfig.app.json

Both passed without any error. 2nd one logged unused React error but that seems unrelated.

[o-alexandrov]

@brijeshb42 this line must produce a typing error. It currently does NOT.

https://github.com/o-alexandrov/material-ui-pigment-css-vite-ts/blob/cb38ccd9dd731fddebb48f099394991537dfaa49/vite.config.ts#L22