重现步骤

Link to live example
步骤：

1. 创建一个具有各种默认设置的基本主题
2. 使用一组覆盖默认主题的自定义主题对象，特别是在覆盖组件根样式时访问 ({ theme }) => ( 函数。
3. 将两个主题与 experimental_extendTheme 合并

当前行为

样式没有合并，textTransform 被丢弃，注销主题后我们可以看到这个错误

{
  "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)]"
}

将 styleOverrides 从

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

更改为

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

成功地合并了主题。

预期行为

我可能走错了路，并希望在这方面得到任何指导。

上下文

我想有一个基本主题，其中包含一些默认设置，然后用各种主题覆盖其部分内容。我希望能够使用主题函数来访问诸如 theme.spacing() 等内容。

你的环境

npx @mui/envinfo

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

搜索关键词:合并，主题