javascript - Füge Eigenschaft zur Hintergrund-Eigenschaft in createMuiTheme in Material-UI unter Verwendung von Typescript hinzu

Ich versuche, eine neue Eigenschaft innerhalb von createMuiTheme hinzuzufügen. Aber Typescript lässt mich das nicht tun.

Ich habe die Anweisungen hier befolgt: https://next.material-ui.com/guides/typescript/#customization-of-theme

Ich habe eine .ts-Datei erstellt, in die ich Folgendes eingefügt habe:

import * as React from 'react';

declare module '@material-ui/core/styles' {
  interface TypeBackground {
    darker: string;
  }
}

Und hier erstelle ich das Material-UI-Theme:

import {createMuiTheme} from "@material-ui/core";

export const darkTheme = createMuiTheme({
    palette: {
        background: {
            darker: '#fafa',
        },
        mode: 'dark'
    },
})

Aber ich bekomme diesen Fehler:

TS2322: Type '{ darker: string; }' is not assignable to type 'Partial<TypeBackground>'.   Object literal may only specify known properties, and 'darker' does not exist in type 'Partial<TypeBackground>'

Trotzdem habe ich das Beispiel des Material-UI-Teams ausprobiert, es funktioniert, aber nicht mein Code. Ich kann nicht finden, warum. Ich habe wahrscheinlich etwas vergessen.

Ich verwende die Schnittstelle "TypeBackground", weil sie so im createPalette.d.ts-Datei von material-ui benannt ist.

export interface TypeBackground {
  default: string;
  paper: string;
}

Also habe ich versucht, dasselbe zu tun. Ich dachte, es sei dasselbe wie das Hinzufügen von Props zur Palette-Eigenschaft.

Danke!

Antwort #1

Ok, also ich habe gerade eine Lösung gefunden. Aber ich verstehe wirklich nicht, warum sie funktioniert.

Ich habe die Zeile „declare module“ geändert:

declare module '@material-ui/core/styles/createPalette'

Ich habe gerade „createPalette“ nach styles hinzugefügt. Jetzt funktioniert es, ich kann nur nicht herausfinden warum ^^!

Antwort #2

Sie müssen die Schnittstelle in der Modulerklärung exportieren.

  export interface TypeBackground {
    darker: string;
  }