将 type: 'dark' 应用到 MUI 调色板会破坏我的网站，除非它直接在 createMuiTheme() 函数中定义

Question

type: 'dark'在直接功能之外的任何地方声明时，我无法使用 MUI 为我的网站定义“深色”主题createMuiTheme()。

例如，以下工作：

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(theme)

'{ 调色板：{ 主：{ 灯：字符串；主要：字符串；暗：字符串；对比文本：字符串；}; 次要：{ 灯：字符串；主要：字符串；暗：字符串；对比文本：字符串；}; 类型：字符串；}; }' 不能分配给'ThemeOptions' 类型的参数。属性“调色板”的类型不兼容。类型 '{ 主要：{ 灯：字符串；主要：字符串；暗：字符串；对比文本：字符串；}; 次要：{ 灯：字符串；主要：字符串；暗：字符串；对比文本：字符串；}; 类型：字符串；}' 不可分配给类型 'PaletteOptions'。属性“类型”的类型不兼容。类型 'string' 不能分配给类型 '"dark" | “光” | 未定义'.ts(2345)

我正在使用一个.tsx文件。

为什么我不能type = 'dark'在直接createMuiTheme()函数之外定义？

Answer 1

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

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

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

Answer 2

自@Farser 接受的答案以来，命名似乎已经发生了变化，所以我添加了一个更新的答案，以防将来有人像我一样偶然发现这个问题。

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

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

这是一个最小的工作示例（假设由或类似生成App.tsx默认值）：index.tsxcreate-react-app

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

作为旁注，还应该可以用来useMediaQuery("(prefers-color-scheme: dark)")确定用户是否喜欢深色主题或浅色主题，并自动设置适当的主题，如下所示：

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

另一个小补充/注意：不要忘记<CssBaseline />在 的顶部添加<ThemeProvider>，通常在根元素/组件之上。