Typography组件无法读取ThemeProvider中的主题，求排查原因

你遇到的问题是因为从esm.sh导入的Material UI组件与样式模块可能来自不同版本，导致ThemeProvider和Typography不在同一个React上下文环境中，因此Typography无法读取到你配置的主题。

解决方案 #

给所有Material UI相关的导入指定同一个具体版本，确保所有模块版本一致。修改后的代码如下：

import * as React from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";

import {
  createTheme,
  ThemeProvider,
} from "https://esm.sh/@mui/material/styles@5.14.18";
import Typography from "https://esm.sh/@mui/material/Typography@5.14.18";
import CssBaseline from "https://esm.sh/@mui/material/CssBaseline@5.14.18";

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

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

const root = createRoot(document.getElementById("root"));
root.render(<App />);

补充说明 #

esm.sh在未指定版本时会自动解析包的最新版本，但不同Material UI子包的版本可能存在微小差异，或者缓存机制导致加载了不同版本，这会破坏主题上下文的一致性。指定统一版本后，所有组件会共享同一个主题上下文，你的自定义主题样式就能正常作用到Typography组件上。

内容的提问来源于stack exchange，提问作者kulodo