在 material UI5 中传递默认主题

Question

谁能解释一下如何在 Material UI5

中传入 defauklt 主题

在 Material UI6 中，我以前是这样做的

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

但是当我阅读 M-UI5 文档时（据我所知）没有关于如何完成的解释，他们唯一提到的关于 makeStyle 的部分包含此页面中的代码 docs

+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>;
 }

所以我想运行在每个组件上创建主题（）来获取主题吗？，如果我遗漏了文档中的明显内容，我深表歉意，可能是因为我的英语不好

Answer 1

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

if you are using JSS style overrides for your components (for example overrides created by makeStyles), you will need to take care of the CSS injection order. To do so, you need to have the StyledEngineProvider with the injectFirst option at the top of your component tree.

否则，About 组件中 MUI Card 的默认样式将胜过通过 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 注入顺序不正确。

在 material UI5 中传递默认主题

passing default theme in material UI5

javascript

reactjs

material-ui

makestyles