reactjs 属性'palette'不被DefaultTheme从MaterialUI识别，一旦材质UI从v4移动到v5，它就停止工作

uyto3xhc 于 2023-05-06 发布在 React

关注(0)|答案(3)|浏览(167)

我正在将应用程序从Material UI v4迁移到v5，我面临一些问题。其中之一是，一旦在makeStyles中使用，Material UI中的DefaultTheme就无法识别属性“palette”。该组件在v4中工作正常，但一旦我将大多数移动到v5，它就显示错误，并且无法识别'palette'属性。你能帮我看一下，然后告诉我怎么修吗？
这是它在main组件中的调用方式：import { makeStyles } from '@mui/styles';

const useStyles = makeStyles((theme) => ({
styledButton: {
    '&': { color: theme.palette.cerulean },
    '&.Mui-selected': {
        backgroundColor: theme.palette.aliceBlue,
        color: theme.palette.cerulean,
    },
    '&:hover': {
        backgroundColor: 'rgba(227,245,255, 0.5) !important',
    },
},

}））;
当我悬停在上面的'调色板' TS给予这样的评论：类型“DefaultTheme”上不存在属性“palette”。
主题在App中的调用如下：

import { ThemeProvider } from '@mui/styles';

import { MainTheme } from '@nevomo/utilities';

export const App: FC = () => (
<StyledEngineProvider injectFirst>
    <ThemeProvider theme={MainTheme}>
        <SCThemeProvider theme={MainTheme}>
            <CssBaseline />
            <Router>
                <AuthContextProvider>
                    <Notifications />
                    <RoutingManager />
                </AuthContextProvider>
            </Router>
        </SCThemeProvider>
    </ThemeProvider>
</StyledEngineProvider>

）;
MainTheme看起来像：

import { createTheme, Theme } from '@mui/material/styles';
import { paletteColors } from './main-theme-colors';

export const MainTheme: Theme = createTheme({
spacing: (factor: number) => `${factor * 1}rem`,
palette: {
    primary: {
        main: paletteColors.primary.main,
    },
    secondary: {
        main: paletteColors.secondary.main,
    },
    error: {
        main: paletteColors.error.main,
    },
    white: '#FFFFFF',
    lighterBlue: '#EFFBFF',
    lightBlue: '#DEF7FF',
    celeste: '#00A7E1',
    blue: '#0027d3',
    navy: '#083D77',
    greenSalad: '#4DA167',
    red: '#d32f2f',
    pink: '#FFE3E3',
    lightPink: '#ECD6E6',
    darkPink: '#700353',
    black: '#000000',
    orange: '#FD5C01',
    darkRed: '#AD160B',
    aliceBlue: '#E3F5FF',
    cerulean: '#007CBA',
},

}）;
非常感谢！

reactjs

来源：https://stackoverflow.com/questions/70613394/property-palette-is-not-recognised-by-defaulttheme-from-materialui-it-stopped

3条答案

按热度按时间

ecbunoof1#

OP解决了他们的问题，但我将从MUI迁移文档中留下，以供将来面临同样问题的人使用：

[Types] Property“palette”，“spacing”does not exist on type 'DefaultTheme'

因为makeStyles现在是从@mui/styles包导出的，而@mui/styles包不知道核心包中的Theme。要解决这个问题，需要用核心中的Theme来扩充@mui/styles中的DefaultTheme（空对象）。

TypeScript项目

将此代码段放入主题文件：

// it could be your App.tsx file or theme file that is included in your tsconfig.json
import { Theme } from '@mui/material/styles';

declare module '@mui/styles/defaultTheme' {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface (remove this line if you don't have the rule enabled)
  interface DefaultTheme extends Theme {}
}

Javascript项目

如果您的IDE（例如VSCode）能够从d.ts文件中推断类型，使用以下片段在src文件夹中创建index.d.ts：

// index.d.ts
declare module "@mui/private-theming" {
  import type { Theme } from "@mui/material/styles";

  interface DefaultTheme extends Theme {}
}

赞(0）回复(0）举报 2023-05-06

hs1ihplo2#

当前的MUI版本以这种方式修复了DefaultTheme类型错误-

// global.d.ts
import { Theme } from '@mui/material/styles';

declare module '@mui/system' {
  interface DefaultTheme extends Theme {}
}

赞(0）回复(0）举报 2023-05-06

dtcbnfnu3#

我正在使用v4，我正在解决这个问题。
问题是因为我用了

import { useTheme } from '@material-ui/styles';

而不是

import { useTheme } from '@material-ui/core/styles';

赞(0）回复(0）举报 2023-05-06

我来回答

reactjs 属性'palette'不被DefaultTheme从MaterialUI识别，一旦材质UI从v4移动到v5，它就停止工作

3条答案

相关问题

热门标签

最新问答