MUI 自定义主题不适用

Question

我正在尝试使用上下文提供程序应用自定义 MUI 主题，但该主题未应用于子组件中。

这是我的调色板代码：

import React from "react";
import { createTheme, ThemeProvider } from "@material-ui/core";
import { orange } from "@material-ui/core/colors";

const theme = createTheme({
  palette: {
    primary: orange,
    secondary: {
      main: "#000000",
    },
  },
});

export default function Palette({ children }) {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}

这是我使用它的自定义按钮：

import React from "react";
import Icon from "@material-ui/core/Icon";
import Button from "@mui/material/Button";
import Palette from "../Themes/Palette";

export default function IconButton({ icon }) {
  return (
    <Palette>
      <Button
        sx={{
          width: 60,
          height: 60,
          borderRadius: "50%",
        }}
        variant="contained"
      >
        <Icon>{icon}</Icon>
      </Button>
    </Palette>
  );
}

Answer 1

您正在使用不同版本的material-ui库。如果您使用@material-ui则意味着您正在使用 v4。如果您使用@mui则表示您使用的是 v5。

你应该改变：

import { createTheme, ThemeProvider } from "@material-ui/core";
import { orange } from "@material-ui/core/colors";

到：

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

你还应该改变：

import Icon from "@material-ui/core/Icon";

到：

import Icon from "@mui/material/Icon";

您可以查看此 stackblitz的实时工作示例。

您还可以查看从 v4 到 v5 的迁移。

Answer 2

如果人们已经尝试了几乎所有方法但他们的样式仍然不适用，请删除所有 mui 和样式包并重新安装它们。可能存在一些冲突的软件包，导致 mui 出现问题。我花了两天时间坚持应用自定义主题，然后终于做到了。它确实有效，这就是我写这个答案的原因。和平。