slotProps and sx properties don't allow theme-based overrides in TypeScript

[eliprand]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-1rixxg?file=Demo.tsx

Steps:

1. Create a component with slots (I use Popover)
2. override the sx property of a slot (I use paper)
3. try using a function as the value, to leverage a theme-based value for example
4. The code runs correctly
5. But TypeScript will complain that parameter t is of type any (assuming you use t as the theme prop)

Current behavior

Here is the Popover example from the docs.

<Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        slotProps={{
          paper: {
            sx: {
              color: (t) => t.palete.primary.dark,
            },
          },
        }}
      >
        <Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
      </Popover>

TypeScript will complain about the type of t in the sx prop for the paper slot:

But the code runs just fine, as expected.

Expected behavior

TypeScript should recognize a theme-based override and not complain.

Context

Trying to override properties of a slot with theme-based values.

Your environment

npx @mui/envinfo

``` System: OS: macOS 14.6.1 Binaries: Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm pnpm: Not Found Browsers: Chrome: 128.0.6613.114 Edge: 128.0.2739.42 Safari: 17.6 npmPackages: @emotion/react: ^11.13.3 => 11.13.3 @emotion/styled: ^11.13.0 => 11.13.0 @mui/base: 5.0.0-beta.58 @mui/core-downloads-tracker: 6.0.1 @mui/icons-material: ^6.0.1 => 6.0.1 @mui/lab: ^6.0.0-beta.8 => 6.0.0-beta.8 @mui/material: ^6.0.1 => 6.0.1 @mui/private-theming: 6.0.1 @mui/styled-engine: 6.0.1 @mui/system: 6.0.1 @mui/types: 7.2.16 @mui/utils: 5.16.6 @mui/x-data-grid: 7.15.0 @mui/x-data-grid-pro: ^7.15.0 => 7.15.0 @mui/x-date-pickers: 7.15.0 @mui/x-date-pickers-pro: ^7.15.0 => 7.15.0 @mui/x-internals: 7.15.0 @mui/x-license: 7.15.0 @types/react: ^18.3.4 => 18.3.4 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 typescript: ^5.5.4 => 5.5.4 ```

Search keywords: slotprops sx

[siriwatknp]

I found a TypeScript bug, will open a PR soon.

[github-actions[bot]]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[!NOTE] We value your feedback @eliprand! How was your experience with our support team? If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!

[samsch]

It looks like #43523 went out in v6.0.2, but updating @mui/material to v6.0.2 in the stackblitz above doesn't solve the type error.

I'm also still seeing the issue in a local project using v6.0.2.

It also doesn't matter if it's a slot or sx prop directly on a component, nor if you use sx={(theme) => ...} or sx={{ someProperty: (theme) => ... }}.

---

EDIT

The type error happens with TS v5.5.4 but not older v5.4.5, and it also happens with v5.5.4 in @mui/material v5.16.7