打字稿错误说类型上不存在属性答案

【问题标题】：Typescript error says property does not exist on type打字稿错误说类型上不存在属性
【发布时间】：2021-09-21 17:16:04
【问题描述】：

注意！我已经设法通过在下面的声明中使用“主题：任何”来缓解这个问题，但我更喜欢更好的方法。

我在前端使用 React (v17.0.2) 和 material-ui (v5.0.0)，我收到以下错误：

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

每当我尝试像这样访问我的主题时：

import { useTheme } from '@emotion/react';

export default function MyComponent() {

    const theme = useTheme()

    return (
        <Box
            sx={{
                backgroundColor: theme.palette.mode === 'dark' ? 'primary.dark' : 'primary',
            }}
        ></Box>
    );
}

我在声明下方使用console.log(theme) 记录了该对象，它成功记录了我的主题。所以它在那里，但我无法像上图那样访问它。以下是记录的一些内容：

{breakpoints: {…}, direction: 'ltr', components: {…}, palette: {…}, spacing: ƒ, …}
  > breakpoints: {keys: Array(5), ...}
  > components: {MuiTypography: {…}, ...}
  direction: "ltr"
  > mixins: {toolbar: {...}}
  > palette: {mode: 'dark', ...}
  ...

另外，我找到了“主题”类型所在的文件，并且“调色板”属性肯定存在。这是文件的sn-p：

export interface Theme extends SystemTheme {
  mixins: Mixins;
  components?: Components;
  palette: Palette;
  shadows: Shadows;
  transitions: Transitions;
  typography: Typography;
  zIndex: ZIndex;
  unstable_strictMode?: boolean;
}

我也尝试过像这样导入和使用主题：

import { Theme } from '@mui/material/styles';
...
const theme: Theme = useTheme()
...

这给了我一个新错误（在“主题”变量下划线）：

“主题”类型缺少“主题”类型的以下属性：mixins、调色板、阴影、过渡等等。

我也试过这样：

import { Theme } from '@mui/material/styles';
...
const theme = useTheme<Theme>()
...

这给了我一个新错误（在 useThemeTheme>() 中强调“主题”）

预期的类型参数为 0，但得到了 1。

还有

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

我是 typescript 的新手，感谢任何帮助。

编辑感谢 Alex Wayne 得到了答案（如果我最初误解了答案，也许还有窗台）。这是有效的代码：

import { useTheme, Theme } from '@mui/material';
const theme: Theme = useTheme()
<Box sx={{backgroundColor: theme.palette.mode}}></Box>

【问题讨论】：

您的 useTheme 和 Theme 似乎来自不同的库。
刚尝试从“@emotion/react”导入，但仍然收到“主题类型上不存在调色板”的错误

标签： reactjs typescript material-ui

【解决方案1】：

@emotion/react 导出 Theme 类型，由同一包中的 useTheme() 返回。
@mui/material/styles 导出 Theme 类型，由同一包中的 createTheme 返回。
这些不是同一类型。

它们在每个包中具有相同的名称，但完全不相关。

这就是失败的原因：

import { useTheme } from '@emotion/react';
import { Theme } from '@mui/material/styles';
const theme: Theme = useTheme()
// Type 'Theme' is missing the following properties from type 'Theme': mixins, palette, shadows, transitions, and 2 more.(2740)

Playground

但这成功了。

import { useTheme, Theme } from '@emotion/react';
const theme: Theme = useTheme()

Playground

我不知道您打算使用哪一个，但here are the docs on emotion themes 和here are the docs on Material UI themes。它们是独立的东西，您需要根据它们的预期用途来使用它们。

【讨论】：

我刚刚对此进行了测试，但现在我再次收到原始错误Property 'palette' does not exist on type 'Theme'.。作为额外说明，我已经创建了一个主题并将其传递给 ThemeProvider。
我并不是说我的第二个 sn-p 是你应该使用的那个。我只是在说明正在执行的类型。如果您使用来自@emotion/react 的useTheme()，那么它将没有palette 属性，因为这不是情感提供的一部分。您似乎期待材料 UI 主题，所以也许您应该遵循文档而不使用情感主题。或者以情感的方式做主题。走哪条路取决于你。但是您不能将情感视为材料设计主题。它们是完全不同的东西。
感谢指正。从“@mui/material”导入上述内容有效。

【解决方案2】：

为了获得正确的类型检查，您可以使用 MUI 扩展情感主题界面。

import { Theme as MuiTheme } from "@mui/material/styles";

declare module '@emotion/react' {
  export interface Theme extends MuiTheme {}
}

如中所述 https://emotion.sh/docs/typescript#define-a-theme

【讨论】：