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]

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

[DiegoAndai]

@samsch hi! Thanks for reaching out. I think the issue you're encountering might be a TS configuration issue with StackBlitz. Running the same code in CodeSandbox doesn't show the issue: https://codesandbox.io/p/sandbox/issue-43522-material-ui-repro-xmtyqc