MUI 属性“调色板”在“主题”类型上不存在

Question

我正在使用带有打字稿的 MUI。我不断收到此错误

类型“主题”上不存在属性“调色板”。ts(2339)

这是代码

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

但是当我使用console.log变量时theme，它会显示一个具有该属性的对象palette。

{palette:...}

当对象具有属性时，为什么打字稿显示此错误？我应该将变量设置为什么类型theme以便编译器传递？

Answer 1

styled我尝试模拟您的问题，但只有从@mui/styles或导入时才会出现此错误@mui/styled-engine。

Styled 应该是 import from ，正如您在此处@mui/material/styles看到的那样。所以，代码将是这样的：

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

根据 Mui 文档，关于两种导入的差异：

@mui/styled-engine：

@mui/styled-engine - 情感的 styled() API 的薄包装，添加了一些其他必需的实用程序，例如 <GlobalStyles /> 组件、css 和关键帧帮助程序等。这是默认设置。

* 基本上它不能与其他@mui库一起使用，例如ThemeProvider.

@mui/材质/样式：

所有 MUI 组件都使用 styled() 实用程序进行样式设置。该实用程序构建在 @mui/styled-engine 的 styled() 模块之上，并提供附加功能。

并从使用代码styled导入作为基础，实现功能并使其可以与其他库（例如和）一起使用和处理。@mui/material/stylesstyled@mui/styled-engine@muiThemeProvidercreateTheme

您可以在下面检查两种实现的差异：