I am trying to have different parts of my application have different fonts. I want to achieve this through theme nesting: https://mui.com/styles/advanced/#theme-nesting.

But theme nesting doesn't work when overriding fonts.

App.js:

import React from "react";
import { ThemeProvider, Button, Typography } from "@mui/material";
import outerTheme from "./outerTheme";
import innerTheme from "./innerTheme";

const App = () => {
  return (
    <ThemeProvider theme={outerTheme}>
      <Button>outer</Button>
      <Typography color="primary">outer</Typography>
      <ThemeProvider theme={innerTheme}>
        <Button>inner</Button>
        <Typography color="primary">inner</Typography>
      </ThemeProvider>
    </ThemeProvider>
  );
};

export default App;

outerTheme.js:

import { createTheme } from "@mui/material";

const outerTheme = createTheme({
  palette: {
    primary: {
      main: "#ff0000",
    },
  },
  typography: {
    fontFamily: "sans-serif",
  },
});

export default outerTheme;

innerTheme.js:

import { createTheme } from "@mui/material";
import outerTheme from "./outerTheme";

const innerTheme = createTheme(outerTheme, {
  palette: {
    primary: {
      main: "#0000ff",
    },
  },
  typography: {
    fontFamily: "serif",
  },
});

export default innerTheme;

The result shows that all buttons and typographies use the outer theme's font (i.e. sans-serif) but use the correct respective theme colors.