In this simple example I'm importing Material UI from esm.sh.

I create a theme which seems to be ok when I console.log it.

However the Typography component is not picking up the theme from the ThemeProvider.

Does anyone know why?

CodeSandBox

      import * as React from ";;
      import { createRoot } from ";;

      import {
        createTheme,
        ThemeProvider,
      } from "/@mui/material/styles";
      import Typography from "/@mui/material/Typography";
      import CssBaseline from "/@mui/material/CssBaseline";

      const myTheme = createTheme({
        typography: {
          h1: {
            fontSize: "1rem",
            color: "green",
          },
        },
      });

      const App = () => {
        return (
          <div>
            <ThemeProvider theme={myTheme}>
              {console.log(myTheme)}
              <CssBaseline />
              <Typography variant="h1">heading 1</Typography>
            </ThemeProvider>
          </div>
        );
      };

      const root = createRoot(document.getElementById("root"));

      root.render(<App />);