簡體   English   中英

MUI:從material v4升級到v5后,提供的`styles`參數無效

[英]MUI: The `styles` argument provided is invalid after upgrading from material v4 to v5

我最近從 Material V4 升級到 V5,現在出現以下錯誤:

MUI: The `styles` argument provided is invalid.
You are providing a function without a theme in the context.
One of the parent elements needs to use a ThemeProvider.

在我的App.js文件中,我有以下設置:

import { createTheme, ThemeProvider, StyledEngineProvider, adaptV4Theme } from '@mui/material/styles';
import makeStyles from '@mui/styles/makeStyles';
import { CssBaseline, Hidden } from '@mui/material';


let theme = createTheme(adaptV4Theme({
  palette: {
    primary: {
      light: '#63ccff',
      main: '#009be5',
      dark: '#006db3'
    }
  },
  typography: {
    h5: {
      fontWeight: 500,
      fontSize: 26,
      letterSpacing: 0.5
    }
  },
  shape: {
    borderRadius: 8
  },
  props: {
    MuiTab: {
      disableRipple: true
    }
  },
  mixins: {
    toolbar: {
      minHeight: 48
    }
  }
}));

theme = {
  ...theme,
  overrides: {
    MuiDrawer: {
      paper: {
        backgroundColor: '#18202c'
      }
    }
  }
};

然后在我的 App.js 中返回以下內容:

  const classes = useStyles();

  return (
    <NotifyProvider>
        <Routes>
          <Route path="/login" element={<Login />}></Route>
          <Route path="/logout" element={<Logout />}></Route>
        </Routes>
          <StyledEngineProvider injectFirst>
            <ThemeProvider theme={theme}>
              <div className={classes.root}>
                <CssBaseline />
                <nav className={classes.drawer}>
                </nav>
                <div className={classes.app}>
                  <Header
                    onDrawerToggle={handleDrawerToggle}
                  />
                  <main className={classes.main}>
                    <Routes>
                      <Route path="/" />
                    </Routes>
                  </main>
                </div>
              </div>
            </ThemeProvider>
          </StyledEngineProvider>
    </NotifyProvider>
  );

我不確定問題是什么以及我缺少什么,但我也注意到adaptV4Theme已被棄用。

任何幫助都會很棒,因為該應用程序根本沒有啟動。

我有同樣的問題。 這里有一個線程: https ://github.com/mui/material-ui/issues/30092 以及一些故障排除建議。 他們都沒有為我工作,但線程中的其他一些人似乎已經通過刪除yarn.lock並重新運行yarn install解決了這個問題,有關更多詳細信息,請參閱線程。 如果您確實解決了它,請在此處發布並讓我知道修復了什么,已經為此工作了幾天,但沒有運氣。

ETA - 我能夠通過將我正在測試的組件包裝在<ThemeProvider/>中來在我的應用程序中解決這個問題,如下所示: https ://github.com/mui/material-ui/issues/15528#issuecomment- 487952731 (我只是在測試時收到錯誤消息)

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM