Reactjs 申请类型：'；黑暗'；除非直接在CreateMuiteme（）函数中定义，否则MUI调色板会破坏我的站点

在直接

createMuiTheme（）

function之外的任何地方声明

type:'dark'

时，我无法使用MUI为我的站点定义“暗”主题

例如，以下工作：

const siteTheme = createMuiTheme({
  palette: {
    primary: {
      light: '#484848',
      main: '#212121',
      dark: '#000000',
      contrastText: '#fff',
    },
    secondary: {
      light: '#b0ff57',
      main: '#76ff03',
      dark: '#32cb00',
      contrastText: '#000',
    },
    type: 'dark'
  },
})

但有以下中断：

const theme = {
  palette: {
    primary: {
      light: '#484848',
      main: '#212121',
      dark: '#000000',
      contrastText: '#fff',
    },
    secondary: {
      light: '#b0ff57',
      main: '#76ff03',
      dark: '#32cb00',
      contrastText: '#000',
    },
    type: 'dark'
  },
}

const siteTheme = createMuiTheme(theme)

它给出的错误是

54 | const siteTheme=createMuiTheme（主题）

类型为“{palete:{primary:{light:string；main:string；dark:string；contractText:string；}”的参数不能分配给类型为“ThemeOptions”的参数。 属性“调色板”的类型不兼容。 类型“{primary:{light:string；main:string；dark:string；contractText:string；}；secondary:{light:string；main:string；dark:string；}”不能分配给类型“PaletteOptions”。 属性“type”的类型不兼容。 类型“string”不可分配给类型“dark”|“light”| undefined.ts（2345）

我正在使用

.tsx

文件

---

为什么我不能在direct

CreateMuiteme（）

函数之外定义

type='dark'

？

因为您使用的是TypeScript，所以需要确保将其转换为正确的类型：

import { PaletteType } from '@material-ui/core';

const theme = {
  palette: {
    type: 'dark' as PaletteType,
  }
}

---

从那以后，名字似乎已经改变了，所以我添加了一个更新的答案，以防将来有人像我一样偶然发现这个问题

我在

@material ui/core/index.d.ts:50中找到了以下行，因此我假设作者已决定将调色板“type”重命名为“mode”：

下面是
App.tsx
的一个最小工作示例（假设
create react App
或类似程序生成默认的
index.tsx
）：

另一个小的添加/注意：不要忘记在
顶部添加
，通常在根元素/组件上方。
您找到了解决方案吗？请注意
PaletteType
似乎已重命名为
PaletteMode
<代码>@material ui/core/index.d.ts:50

-

导出类型PaletteMode='light'|'dark'

这反过来意味着

类型

键已相应地重命名为

模式

。您保存了我：）

export type PaletteMode = 'light' | 'dark';

import React from "react";
import { createMuiTheme, PaletteMode, ThemeProvider } from "@material-ui/core";

const theme = createMuiTheme({
  palette: {
    mode: "dark" as PaletteMode
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <div className="App" />
    </ThemeProvider>
  );
}

mode: (useMediaQuery("(prefers-color-scheme: dark)") ? "dark" : "light") as PaletteMode