将类型："深色"应用于 MUI 调色板会破坏我的网站，除非它直接在 createMuiTheme() 函数中定义

Question

我无法在直接createMuiTheme() Funciton以外的任何地方宣布type: 'dark'时使用MUI定义一个'Dark'主题。

例如，以下工作：

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(

类型的参数'{palette：{primary：{light：string;主：字符串;黑暗：弦；contrastText：字符串;};次级：{light：string;主：字符串;黑暗：弦；contrastText：字符串;};类型：字符串;};}'不能分配给类型"主题"的参数。 属性"调色板"的类型是不兼容的。 键入'{primary：{light：string;主：字符串;黑暗：弦；contrastText：字符串;};次级：{light：string;主：字符串;黑暗：弦；contrastText：字符串;};类型：字符串;}'不能分配给'PaletteOptions'。 属性"类型"的类型是不兼容的。 键入"字符串"不能分配给'" dark" |"轻" |Undefined'.ts(2345(

我正在使用.tsx文件。

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

Answer 1

因为您使用的是打字稿，因此需要确保将其施放为正确的类型：

import { PaletteType } from '@material-ui/core';
const theme = {
  palette: {
    type: 'dark' as PaletteType,
  }
}

Answer 2

自从 @Farser接受的答案以来，命名似乎已经改变，因此我正在添加一个更新的答案，以防万一有人在这个问题上偶然发现这个问题。

。

我在@material-ui/core/index.d.ts:50上找到了以下行，因此我认为作者已决定重命名"类型"。到"模式"：

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

这是App.tsx的最小工作示例(假设create-react-app或类似的默认index.tsx(：

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

另一个小添加/注意：别忘了在<ThemeProvider>的顶部添加<CssBaseline />，通常在您的根元素/组件上方。