React Material UI ThemeProvider 未应用

我在用着@material-ui/核心 https://material-ui.com/处理我的 React 应用程序中的主题，但由于某种原因，某些样式没有被应用。

这是我的sandbox https://codesandbox.io/s/eloquent-sinoussi-462ed?file=/src/App.tsx将完整的代码（下面的相关片段）。

我跟着example https://material-ui.com/customization/theming/在 Material UI 的文档中，但它似乎不起作用。

有趣的是，文本确实居中对齐（我在样式中指定），但背景颜色保持默认值#fafafa代替#424242正如我的主题中所指定的。所以我猜样式正在应用，但我的主题没有应用到样式。

另一个奇怪的事情是我注销了theme.palette.background.default内makeStyles回调，它是#424242.

另外，如果我设置的值backgroundColor in the useStyles挂钩到静态字符串，例如#f00，它确实适用（背景颜色变为红色）。

useStyles 钩子：

const useStyles = makeStyles(
  (theme: Theme) =>
    createStyles({
      root: {
        backgroundColor: theme.palette.background.default,
        height: "100%",
        textAlign: "center",
        width: "100%"
      }
    }),
  { name: "App" }
);

应用程序组件：

const App = () => {
  const classes = useStyles();
  return (
    <>
      <CssBaseline />
      <ThemeProvider theme={darkTheme}>
        <div className={classes.root}>hello</div>
      </ThemeProvider>
    </>
  );
};

Theme

// NOTE: gray[800] = #424242
export const darkTheme = createTheme({
  palette: { background: { default: grey[800] } }
});

App（因此你的useStylescall) 位于受深色主题影响的元素层次结构之外ThemeProvider。如果您将 div 拉入其自己的组件并调用useStyles从那里开始，它工作得很好。

import React from "react";

import CssBaseline from "@material-ui/core/CssBaseline";
import {
  makeStyles,
  createStyles,
  Theme,
  ThemeProvider
} from "@material-ui/core/styles";

import { darkTheme } from "./DarkTheme";

const useStyles = makeStyles(
  (theme: Theme) =>
    createStyles({
      root: {
        backgroundColor: theme.palette.background.default,
        height: "100%",
        textAlign: "center",
        width: "100%"
      }
    }),
  { name: "App" }
);

const Hello = () => {
  const classes = useStyles();
  return <div className={classes.root}>hello</div>;
};
const App = () => {
  return (
    <>
      <CssBaseline />
      <ThemeProvider theme={darkTheme}>
        <Hello />
      </ThemeProvider>
    </>
  );
};

export default App;