Question

在直接type: 'dark'函数之外的任何地方声明createMuiTheme()时，我无法使用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（theme）

“ {”调色板类型的参数：{primary：{light：string; main：字符串；黑暗：字符串;对比度Text：字符串; };次要的：{light：字符串; main：字符串；黑暗：字符串;对比度Text：字符串; };类型：字符串； }; }”不能分配给“ ThemeOptions”类型的参数。     属性“调色板”的类型不兼容。       输入'{primary：{light：string; main：字符串；黑暗：字符串;对比度Text：字符串; };次要的：{light：字符串; main：字符串；黑暗：字符串;对比度Text：字符串; };类型：字符串； }”不能分配给“ PaletteOptions”类型。         属性“类型”的类型不兼容。           类型'string'不能分配给类型'“ dark” | “光” | undefined'.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's accepted answer起，命名似乎已更改，因此，我将添加一个更新的答案，以防将来有人像我一样偶然发现此问题。

我在@material-ui/core/index.d.ts:50找到了以下一行，因此我假设作者决定将调色板“类型”重命名为“模式”：

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

以下是App.tsx的一个最小工作示例（假设index.tsx或类似者生成的默认create-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>，通常在您的根元素/组件上方。

除非在createMuiTheme（）函数中直接定义，否则将类型：“暗”应用于MUI调色板会破坏我的网站

2 个答案: