Steps to reproduce

Link to live example

Steps:

1. Create a base theme with various defaults
2. Create a custom theme object with a set of overrides to the default theme, specifically accessing the ({ theme }) => ( function when overriding a components root styles.
3. Merge the two themes with the experimental_extendTheme

Current behavior

Styles don't get merged, the textTransform gets dropped and logging out the theme we can see this error

{
  "name": "root",
  "arguments": "[Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.invokeGetter (<anonymous>:3:28)]"
}

Changing the styleOverrides from

MuiButton: {
  root: ({ theme }) => ({
    "--mui-shape-borderRadius": theme.spacing(2),
  })
}

to

MuiButton: {
  root: {
    "--mui-shape-borderRadius": "16px",
  }
}

merges the themes successfully.

Expected behavior

I might be going about this the wrong way and would appreciate any guidance in the matter.

Context

I'd like to have one base theme with some defaults which I'm then going to override parts of with various themes. I'd like to be able to use the theming functions to get access to things like theme.spacing() etc.

Your environment

System:
    OS: Linux 6.8 Pop!_OS 22.04 LTS
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 125.0.6422.60
  npmPackages:
    @emotion/react:  11.11.4 
    @emotion/styled:  11.11.5 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.18 
    @mui/icons-material:  5.15.18 
    @mui/material:  5.15.18 
    @mui/material-nextjs:  5.15.11 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/system:  5.15.15 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    @types/react:  18.3.3 
    react:  18.3.1 
    react-dom:  18.3.1 
    typescript:  5.4.5

Search keywords: merge, themes