javascript - MUI Egenskapen 'palette' finns inte på typen 'Theme'

Jag använder MUI med TypeScript. Och jag får hela tiden detta fel

Egenskapen 'palette' finns inte på typen 'Theme'.ts(2339)

Här är koden

const StyledTextField = styled(TextField)(({ theme }) => ({
  backgroundColor: theme.palette.primary.main,
}));

Men när jag console.logar theme-variabeln, visar den ett objekt med palette-egenskapen.

{palette:...}

Varför visar TypeScript det här felet när objektet har egenskaperna? Vilken typ bör jag göra på theme-variabeln för att kompilatorn ska godkänna det?

Svar #1

Jag försökte simulera ditt problem och jag kunde bara få detta fel om jag importerar styled från @mui/styles eller @mui/styled-engine.

Styled bör importeras från @mui/material/styles, som du kan se här. Så, koden kommer att se ut så här:

import { styled } from "@mui/material/styles";

Angående skillnaden mellan de båda importerna, enligt Mui-dokumentationen:

@mui/styled-engine:

@mui/styled-engine - ett tunt omslag runt emotions styled()-API, med tillägg av några andra nödvändiga verktyg, såsom -komponenten, css- och keyframe-hjälpmedlen, etc. Detta är standard.

* I princip fungerar det inte med andra @mui-bibliotek, som ThemeProvider.

@mui/material/styles:

Alla MUI-komponenter är stylade med detta styled()-verktyg. Detta verktyg är byggt ovanpå styled()-modulen från @mui/styled-engine och erbjuder ytterligare funktioner.

Och styled importerat från @mui/material/styles använder styled-koden från @mui/styled-engine som grund, implementerar funktioner och gör det möjligt att arbeta och hantera med andra @mui-bibliotek såsom ThemeProvider och createTheme.

Du kan kontrollera skillnaden mellan båda implementeringarna nedan:

  1. från @mui/material/styles

  2. från @mui/styled-engine

Relaterade artiklar