javascript - MUI 属性 'palette' 在类型 'Theme' 上不存在

Question

我正在使用带有 typescript 的 MUI。我一直收到这个错误

Property 'palette' does not exist on type 'Theme'.ts(2339)

这是代码

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

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

{palette:...}

当对象具有属性时，为什么 typescript 会显示此错误？我应该为编译器传递什么类型的 theme 变量？

Answer 1

我试图模拟您的问题，但只有在导入 styled 时才会出现此错误来自 @mui/styles或 @mui/styled-engine .

样式应从 @mui/material/styles 导入，如您所见here .所以，代码将是这样的:

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

关于这两个导入的区别，根据 Mui 文档:

@mui/styled-engine:

@mui/styled-engine - a thin wrapper around emotion's styled() API, with the addition of few other required utilities, such as the <GlobalStyles /> component, the css and keyframe helpers, etc. This is the default.

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

@mui/material/styles:

All the MUI components are styled with this styled() utility. This utility is built on top of the styled() module of @mui/styled-engine and provides additional features.

和styled从 @mui/material/styles 进口使用 styled来自 @mui/styled-engine 的代码作为基础，实现功能并使与其他人一起工作和处理成为可能@mui库，如 ThemeProvider和 createTheme .

您可以在下面检查两种实现的区别:

1. 来自 @mui/material/styles

2. 来自 @mui/styled-engine