[material-ui] How to properly merge themes that are using styleOverrides functions?

[perkrlsn]

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

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

Search keywords: merge, themes

[mnajdova]

You need to merge the styleOverrides defined in both themes. You can specify them as an array of functions and have a deepmerge function that makes sure the array are concatenated. Here is a POC on how it can look like: https://stackblitz.com/edit/vitejs-vite-4prbih?file=src%2Fthemes%2Fbase.ts,src%2Fthemes%2Fcustom.ts

On the other hand, we could implement this functionality internally in the @mui packages. cc @siriwatknp, @brijeshb42 what are your thoughts? We haven't done it so far, because it could be expensive to do this always and it seems like it is not that common scenario. Also, our internal deepmerge function doesn't consider arrays.

[perkrlsn]

Thanks @mnajdova, that's exactly what I wanted!

Granted this might not be a super common use case I understand if this is something you won't add internally. But if you do It would be greatly appreciated!

Thanks again!

[jcohen14]

I also ran into this issue. Would be nice to have a first party solution that doesn't require passing arrays to styleOverride slots, but @mnajdova 's solution works in the meantime!

[brentertz]

It appears that not all Mui components support this array syntax, e.g.

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

---

Update: It looks like this issue was fixed in Mui 6.2.1 likely as a result of #44752

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

[brentertz]

I did get something working, but am not keen on "owning" so much merging complexity. I too would love some more guidance.

FWIW, I maintain an internal component library, built on top of Mui. The following is a somewhat simplified example of my custom createTheme function.

https://stackblitz.com/edit/react-nyzyvq-f7k3dp?file=Demo.tsx,createTheme.ts,mergeComponents.ts,components.tsx