传递材料UI5中的默认主题

Question

有人能解释一下如何在Material UI5 中传递defauklt主题吗

在材料UI6中，我经常这样做

const useStyles = makeStyles((theme) => ({
home: {
display: "flex",
paddingTop: "8rem",
width: "100vw",
height: "100vh",
backgroundColor: theme.palette.primary.dark,
color: "white",
},
}));

但当我读完M-UI5文档时(据我所知(，没有解释如何做到这一点，他们提到的关于makeStyle的唯一部分是它在这个页面中包含了这个代码文档

+import { makeStyles } from '@mui/styles';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+const theme = createTheme();
const useStyles = makeStyles((theme) => ({
background: theme.palette.primary.main,
}));
function Component() {
const classes = useStyles();
return <div className={classes.root} />
}
// In the root of your app
function App(props) {
-  return <Component />;
+  return <ThemeProvider theme={theme}><Component {...props} /></ThemeProvider>;
}

那么我是否应该在每个组件上运行createTheme((来获得主题，如果我在文档中遗漏了一件显而易见的事情，可能是因为我糟糕的英语

Answer 1

您缺少的部分来自迁移指南的这一部分：https://mui.com/material-ui/guides/migration-v4/#style-图书馆。

如果您正在为组件使用JSS样式重写(例如由makeStyles创建的重写(，则需要注意CSS注入顺序。要做到这一点，您需要在组件树的顶部提供带有injectFirst选项的StyledEngineProvider。

如果没有这一点，About组件中MUICard的默认样式将战胜通过classes.about指定的样式，其中样式重叠(例如背景(。

将AllProviders组件更改为以下组件(仅添加<StyledEngineProvider injectFirst>(可以修复它：

import React from "react";
import CountriesProvider from "./countries-context";
import QuestionsProvider from "./questions-context";
import {
ThemeProvider,
createTheme,
StyledEngineProvider
} from "@mui/material/styles";
const theme = createTheme();
const AllProviders = (props) => {
return (
<StyledEngineProvider injectFirst>
<QuestionsProvider>
<ThemeProvider theme={theme}>
<CountriesProvider>{props.children}</CountriesProvider>
</ThemeProvider>
</QuestionsProvider>
</StyledEngineProvider>
);
};
export default AllProviders;

https://codesandbox.io/s/funny-flower-w9dzen?file=/src/store/AllProviders.js:303-342

如果没有这一更改，主题传递得很好(否则，当它试图访问主题的某些部分时，您可能会出错(，但CSS注入顺序不正确。