Применение типа: 'dark' к палитре MUI нарушает мой сайт, если он не определен непосредственно в функции createMuiTheme ()

Я не могу определить «темную» тему с MUI для своего сайта при объявлении type: 'dark' где-либо за пределами прямой 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 (тема)

Аргумент типа '{palette: {primary: {light: string; основная: строка; темный: строка; ContraText: строка; }; вторичный: {свет: строка; основная: строка; темный: строка; ContraText: строка; }; тип: строка; }; } 'не может быть назначен параметру типа' ThemeOptions '. Типы «палитры» свойств несовместимы. Введите '{первичный: {свет: строка; основная: строка; темный: строка; ContraText: строка; }; вторичный: {свет: строка; основная: строка; темный: строка; ContraText: строка; }; тип: строка; } 'не может быть назначен типу' PaletteOptions '. Типы собственности "type" несовместимы. Тип «строка» не может быть присвоен типу «темный» | «свет» | undefined'.ts (2345)

Я использую файл .tsx.

Почему я не могу определить type = 'dark' вне прямой createMuiTheme() функции?


reactjs material-ui themes tsx
person ReactHelp    schedule 05.07.2019    source источник
comment
вы нашли решение для этого?   -  person Maysam Torabi    schedule 25.01.2020

Ответы (2)


arrow_upward
7
arrow_downward

Поскольку вы используете TypeScript, вам необходимо убедиться, что вы привели его к правильному типу:

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

const theme = {
  palette: {
    type: 'dark' as PaletteType,
  }
}
person Farser    schedule 24.05.2020
comment
Обратите внимание, что PaletteType, похоже, был переименован в PaletteMode. @material-ui/core/index.d.ts:50 - export type PaletteMode = 'light' | 'dark'; Это, в свою очередь, означает, что ключ type, соответственно, был переименован в mode. - person natiiix; 25.11.2020
comment
Вы спасли меня :) - person Saif Masadeh; 06.05.2021

arrow_upward
0
arrow_downward

Название, похоже, изменилось с момента принятого ответа @Farser, поэтому я добавляю обновленный ответ на случай, если кто-то наткнется на этот вопрос , как и я, в будущем.

Я нашел следующую строку в @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>, обычно над корневым элементом / компонентом.

person natiiix    schedule 25.11.2020