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

Posted 2023-02-19

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

【英文标题】：Applying type: 'dark' to a MUI palette breaks my site unless it is defined directly in the createMuiTheme() function将 type: 'dark' 应用到 MUI 调色板会破坏我的网站，除非它直接在 createMuiTheme() 函数中定义

【发布时间】：2019-11-16 11:54:25

【问题描述】：

当在直接 createMuiTheme() 函数之外的任何地方声明 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(主题)

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

我正在使用.tsx 文件。

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

【问题讨论】：

您找到解决方案了吗？

【参考方案1】：

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

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

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

【讨论】：

请注意PaletteType 似乎已重命名为PaletteMode。 @material-ui/core/index.d.ts:50 - export type PaletteMode = 'light' | 'dark'; 这反过来意味着 type 键已相应地重命名为 mode。

你救了我:)

【参考方案2】：

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

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

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

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