Typescript错误表示类型上不存在属性

Question

注意！我已经设法通过使用"；主题：任意"；在下面的声明中，但我更喜欢一种更好的方法。

我使用React(v17.0.2)作为前端材料ui(v5.0.0)，我得到以下错误：

类型"Theme"上不存在属性"palette"。

每当我试图访问我的主题时，就像这样：

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', ...}
...

此外，我发现文件中的类型"；主题"；并且该财产"；调色板"；肯定存在。以下是文件的一个片段：

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()
...

这给了我一个新的错误(在"主题"变量下面划线)：

类型"Theme"缺少类型"Themes"中的以下属性：混合、调色板、阴影、过渡和6个其他属性。

我也试过这样做：

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

这给了我一个新的错误(useTheme<Theme>()中的"主题"下划线)

应为0个类型参数，但得到1个。

以及

类型"Theme"上不存在属性"palette"。

我是打字的新手，所以我们非常感谢您的帮助。

编辑多亏了Alex Wayne(如果我一开始误解了答案，可能还有窗台)，我才得到了答案。以下是有效的代码：

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

Answer 1

为了获得正确的类型检查，您可以使用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主题

Answer 2

• @emotion/react导出useTheme()从同一个包返回的Theme类型
• @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)

游乐场

但这是成功的。

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

游乐场

我不知道你打算使用哪一个，但这是关于情感主题的文档，这是关于材料UI主题的文档。它们是单独的东西，你需要根据它们的预期用途来使用它们。