Website-Suche

reactjs - Die Eigenschaft 'palette' wird vom DefaultTheme von MaterialUI nicht erkannt, sie funktionierte nicht mehr, sobald Material UI von v4 auf v5 umgestellt wurde

Ich migriere meine App von Material UI v4 auf v5 und stoße auf einige Probleme. Eines davon ist, dass die Eigenschaft 'palette' vom DefaultTheme von Material UI nicht erkannt wird, sobald sie in makeStyles verwendet wird. Diese Komponente funktionierte in v4 einwandfrei, aber nachdem ich den Großteil auf v5 umgestellt habe, zeigt sie mir jetzt einen Fehler und erkennt die Eigenschaft 'palette' nicht. Können Sie bitte einen Blick darauf werfen und mir sagen, wie ich das beheben kann?

So wird es in der Hauptkomponente genannt: import { makeStyles } from '@mui/styles';

const useStyles = makeStyles((theme) => ({
styledButton: {
    '&': { color: theme.palette.cerulean },
    '&.Mui-selected': {
        backgroundColor: theme.palette.aliceBlue,
        color: theme.palette.cerulean,
    },
    '&:hover': {
        backgroundColor: 'rgba(227,245,255, 0.5) !important',
    },
},

}));

Wenn ich über dem 'palette' den Mauszeiger halte, gibt TS einen Kommentar wie: Eigenschaft 'palette' existiert nicht im Typ 'DefaultTheme'.

Thema wird in der App wie folgt genannt:

import { ThemeProvider } from '@mui/styles';

import { MainTheme } from '@nevomo/utilities';

export const App: FC = () => (
<StyledEngineProvider injectFirst>
    <ThemeProvider theme={MainTheme}>
        <SCThemeProvider theme={MainTheme}>
            <CssBaseline />
            <Router>
                <AuthContextProvider>
                    <Notifications />
                    <RoutingManager />
                </AuthContextProvider>
            </Router>
        </SCThemeProvider>
    </ThemeProvider>
</StyledEngineProvider>

);

Hauptthema sieht so aus:

import { createTheme, Theme } from '@mui/material/styles';
import { paletteColors } from './main-theme-colors';

export const MainTheme: Theme = createTheme({
spacing: (factor: number) => `${factor * 1}rem`,
palette: {
    primary: {
        main: paletteColors.primary.main,
    },
    secondary: {
        main: paletteColors.secondary.main,
    },
    error: {
        main: paletteColors.error.main,
    },
    white: '#FFFFFF',
    lighterBlue: '#EFFBFF',
    lightBlue: '#DEF7FF',
    celeste: '#00A7E1',
    blue: '#0027d3',
    navy: '#083D77',
    greenSalad: '#4DA167',
    red: '#d32f2f',
    pink: '#FFE3E3',
    lightPink: '#ECD6E6',
    darkPink: '#700353',
    black: '#000000',
    orange: '#FD5C01',
    darkRed: '#AD160B',
    aliceBlue: '#E3F5FF',
    cerulean: '#007CBA',
},

});

Vielen Dank!

Antwort #1

Der OP hat sein Problem gelöst, aber ich lasse dies aus der MUI-Migrationsdokumentation für zukünftige Personen, die auf dasselbe Problem stoßen, hier:

[Typen] Eigenschaft "palette", "spacing" existiert nicht im Typ 'DefaultTheme'

Da makeStyles jetzt aus dem Paket @mui/styles exportiert wird, das nichts über Theme im Core-Paket weiß, müssen Sie zur Behebung das DefaultTheme (leeres Objekt) in @mui/styles mit Theme aus dem Core erweitern.

TypeScript-Projekt

Fügen Sie diesen Ausschnitt in Ihre Theme-Datei ein:

// it could be your App.tsx file or theme file that is included in your tsconfig.json
import { Theme } from '@mui/material/styles';

declare module '@mui/styles/defaultTheme' {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface (remove this line if you don't have the rule enabled)
  interface DefaultTheme extends Theme {}
}

Javascript-Projekt

Wenn Ihre IDE (z. B. VSCode) in der Lage ist, Typen aus der d.ts-Datei abzuleiten, erstellen Sie index.d.ts in Ihrem src-Ordner mit diesem Snippet:

// index.d.ts
declare module "@mui/private-theming" {
  import type { Theme } from "@mui/material/styles";

  interface DefaultTheme extends Theme {}
}

Antwort #2

Die aktuelle MUI-Version behebt den DefaultTheme-Typfehler auf diese Weise—

// global.d.ts
import { Theme } from '@mui/material/styles';

declare module '@mui/system' {
  interface DefaultTheme extends Theme {}
}

Verwandte Artikel