[system] How to correctly merge multiple themes

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

• May be related to https://github.com/mui-org/material-ui/issues/28633, but that one is not specific to combining themes.

Current Behavior 😯

When composing themes (As described under “Theme Composition” https://mui.com/customization/theming/), typography.fontFamily in the second argument of createTheme is not applied.

Expected Behavior 🤔

typography.fontFamily is applied to each typography variant whether or not createTheme is called with a previous theme as the first argument.

Steps to Reproduce 🕹

https://codesandbox.io/s/mui-5-fontfamily-issue-lwfbf?file=/src/App.js

Steps:

1. Create a theme in two steps as described under “Theme Composition” (https://mui.com/customization/theming/)
2. In the second call to createTheme, set typography.fontFamily to anything other than the MUI default
3. See that the custom fontFamily has not been correctly applied

Context 🔦

Workaround is to define typography.fontFamily in the top level theme. This is a valid work around for me because fontFamily it self does not depend on anything in the previous theme. However, this took me a while to diagnose and worries me that there may be other subtle issues with composing themes.

Your Environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[mnajdova]

@MikeRawding right, your last solution is the correct one. Just make sure you are not doing this in the component, rather outside of it. I am closing this then.

[MikeRawding]

I came up with this which only merges ThemeOptions objects. I still need to generate a true Theme at each step so I can access things like theme.breakpoints.up (which is not contained in ThemeOptions).

https://codesandbox.io/s/mui-5-fontfamily-issue-forked-59t7z?file=/src/App.js