尝试应用主题到我的应用程序，但自定义配置不生效

Question

下面是我的根index.tsx文件:

const theme = createTheme({
typography: {
h4: {
color: "red"
}
}
});
root.render(
<StrictMode>
<ThemeProvider theme={theme}>
<AppRoutes />
</ThemeProvider>
</StrictMode>
);

嵌套在App中的是hompage .tsx其中包含以下内容:

// adding sx={headingStyle} to the header works
// but relying on the Theme does not work.
// const headingStyle = { color: "red" };
const HomePage: React.FC = () => {
return (
<Grid container direction="column">
<Grid item>
<Typography
variant="h4"
// sx={headingStyle}
fontWeight="bold"
>
Home Page
</Typography>
</Grid>
</Grid>
);
};

CodeSandbox。io示例

Answer 1

您的导入来自遗留包@mui/styles。相反，从@mui/material/styles中导入它们。

因此解决方案是这样替换createTheme和ThemeProvider进口:

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

这是一个固定的fork:https://codesandbox.io/s/funny -声音- 145 qe6