时间戳

首页 > 解决方案 > 迁移到 MaterialUI V4

javascript - 迁移到 MaterialUI V4

问题描述

当我将 materialUI/core 和 materialUI/icons 分别从 3.9.3 升级到 4.4.1 和从 3.0.2 升级到 4.4.1 时。

我得到以下错误，

类型错误：styles_1.createGenerateClassName 不是函数

我正在从 @material-ui/core/styles 导入 createMuiTheme。我将如何解决这个问题？任何人都可以对此提出一些建议。请帮我。谢谢

import React, { Suspense, lazy } from 'react';
import { createStore, compose, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import { createBrowserHistory } from 'history';
import { routerMiddleware } from 'connected-react-router';
import createSagaMiddleware from 'redux-saga';
import { MuiThemeProvider } from '@material-ui/core/styles';
import analyticsMiddleware from './module/analytics/middleware';
import 'react-block-ui/style.css';
import muiTheme from './muiTheme';
import initialState from './store/initialState';
import rootReducer from './reducer';
import rootSaga from './saga';
import ErrorBoundary from './module/common/components/ErrorHandler';

const sagaMiddleware = createSagaMiddleware();
const history = createBrowserHistory();
const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(sagaMiddleware, routerMiddleware(history), analyticsMiddleware),
    window.devToolsExtension ? window.devToolsExtension() : f => f
  )
);

sagaMiddleware.run(rootSaga);

const theme = muiTheme;

const App = () => (
    <ErrorBoundary>
      <Provider store={store}>
          <MuiThemeProvider theme={theme}>
              <div>
                <Suspense fallback={<div>Loading...</div>}>

                </Suspense>
              </div>
          </MuiThemeProvider>
      </Provider>
    </ErrorBoundary>
);

export default App;

这是我的 muiTheme.js 文件

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

    const brandOrange = {
      50: '#fbf1e5',
      100: '#f6dcbe',
      200: '#f0c493',
      300: '#eaac68',
      400: '#e69b47',
      500: '#e18927',
      600: '#dd8123',
      700: '#d9761d',
      800: '#d56c17',
      900: '#cd590e',
      A100: '#fffbf9',
      A200: '#ffdac6',
      A400: '#ffb993',
      A700: '#ffa97a',
      contrastDefaultColor: 'dark'
    };

    const brandBlue = {
      50: '#e4ecf2',
      100: '#bcd0de',
      200: '#8fb1c8',
      300: '#6291b2',
      400: '#407aa2',
      500: '#1e6291',
      600: '#1a5a89',
      700: '#16507e',
      800: '#124674',
      900: '#0a3462',
      A100: '#95c2ff',
      A200: '#62a5ff',
      A400: '#2f88ff',
      A700: '#157aff',
      contrastDefaultColor: 'light'
    };

标签： javascriptreactjsmaterial-ui

解决方案

尝试将下面的代码行添加到引发错误的文件中：

import createGenerateClassName from 'material-ui/core/styles/createGenerateClassName

推荐阅读