javascript - Tilføj egenskab til background-prop i createMuiTheme i Material-UI ved hjælp af Typescript

Jeg prøver at tilføje en ny egenskab inde i createMuiTheme. Men Typescript lader mig ikke gøre det.

Jeg fulgte instruktionerne her: https://next.material-ui.com/guides/typescript/#customization-of-theme

Jeg oprettede en .ts-fil, hvor jeg satte dette:

import * as React from 'react';

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

Og her er, hvor jeg opretter Material-UI-temaet:

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

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

Men jeg får denne fejl :

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>'

Alligevel prøvede jeg eksemplet fra material-ui teamet, det virker, men ikke min kode. Jeg kan ikke finde ud af hvorfor. Jeg mangler sandsynligvis noget.

Jeg bruger interfacet "TypeBackground", fordi det er navngivet sådan i createPalette.d.ts-filen fra material-ui.

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

Så jeg prøvede at gøre det samme. Jeg troede, det var det samme som at tilføje props til palette-egenskaben.

Tak!

Svar #1

Ok, så jeg har lige fundet en løsning. Men jeg forstår virkelig ikke, hvorfor det virker.

Jeg ændrede linjen "declare module" :

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

Jeg tilføjede lige "createPalette" efter styles. Nu virker det, jeg kan bare ikke finde ud af hvorfor ^^!

Svar #2

Du skal eksportere interfacet i modulets erklæring.

  export interface TypeBackground {
    darker: string;
  }

Relaterede artikler