Theme inheritance (nesting) not working for Typography but working fine for color palette

[baharalidurrani]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/y8crhq?file=%2Fsrc%2Fcomponents%2FChild.tsx%3A20%2C50

Steps:

1. Install the latest MUI in a basic React project.
2. Set up a global (App-wide) Mui theme using ThemeProvider.
3. Now somewhere in a child component overwrite the theme using:

<ThemeProvider<Theme> theme={(parentTheme) => ({...parentTheme})}>
...
</ThemeProvider>

Current behavior

When we modify the inherited theme, the palette colors work but none of the Typography changes work.

Expected behavior

Typography fontFamily and fontSize etc should also be updated for the child components.
I don’t want to call createTheme() again but instead the <ThemeProvider<Theme> theme={(parentTheme) => ({...parentTheme})}> method should work properly.

Context

App.tsx

    <ThemeProvider
      theme={createTheme({
        palette: {
          primary: {
            main: teal[500],
          },
        },
        typography: {
          // fontSize: 20,
          fontFamily: "Sans",
        },
      })}
    >
      <CssBaseline />
      <Parent />
    </ThemeProvider>

Parent.tsx

    <>
      <Typography>Parent Typography (Normal Sans font)</Typography>
      <Button variant="contained" color="primary">
        Parent Primary
      </Button>
      <Button variant="contained" color="secondary">
        Parent Secondary
      </Button>
      <Child />
    </>

Child.tsx

    <ThemeProvider<Theme>
      theme={(parentTheme) => ({
        ...parentTheme,
        palette: {
          ...parentTheme.palette,
          primary: {
            ...parentTheme.palette.primary,
            main: pink[500], // This is working 👏
          },
        },
        typography: {
          ...parentTheme.typography,
          fontSize: 20, // This is not working!!!
          fontFamily: "Arial", // This is not working either!
        },
      })}
    >
      <Typography>Child Typography (Should be bigger, Arial font)</Typography>
      <Button variant="contained" color="primary">
        Child Primary
      </Button>
      <Button variant="contained" color="secondary">
        Child Secondary
      </Button>
    </ThemeProvider>

Some references from the docs:
https://mui.com/material-ui/customization/theming/#nesting-the-theme
https://mui.com/system/styles/advanced/#theme-nesting

Your environment

npx @mui/envinfo

  System:
    OS: macOS 15.0.1
  Binaries:
    Node: 22.6.0 - /usr/local/bin/node
    npm: 9.5.0 - /usr/local/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 129.0.6668.90
    Edge: Not Found
    Safari: 18.0.1

Search keywords: theme-inheritance theme-nesting

[mnajdova]

Merging the themes as in your code-snippet only replaces some values in the theme, however, if you want the new theme to be processed, you need to invoke the createTheme util. When invoking the theme inside createTheme it will make sure that the value you provide in fontSize is going to be applied for all variants. You can also use the deepmerge util to make sure the two themes are merged correctly, check https://codesandbox.io/p/sandbox/mui-nested-theme-forked-8p4kv7?file=%2Fsrc%2Fcomponents%2FChild.tsx%3A16%2C20&workspaceId=02ae2942-9632-4b06-9a20-6ccadc8dcb97

[github-actions]

👋 Thanks for using this project!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support with Material UI please check out https://mui.com/material-ui/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.