时间戳

首页 > 解决方案 > 从 material-ui v3 迁移到 v4 时如何解决 createGenerateClassName() 和 jssPreset() 的问题？

reactjs - 从 material-ui v3 迁移到 v4 时如何解决 createGenerateClassName() 和 jssPreset() 的问题？

问题描述

让 material-ui v3 在消息传递应用程序上工作，并使用 createGenerateClassName() 和 jssPreset() 来配置 JSS 以允许从右到左的文本方向。

升级到 material-ui v4 后，出现以下编译错误：

./src/index.js
Attempted import error: 'createGenerateClassName' is not exported from '@material-ui/core/styles'.

./src/index.js
Attempted import error: 'jssPreset' is not exported from '@material-ui/core/styles'.

相反，从 @material-ui/styles 导入会导致导入成功，但会导致 createGenerateClassName.js 本身出现另一个错误：

Uncaught (in promise) TypeError: Cannot read property 'Symbol(mui.nested)' of undefined

更改代码以反映 v4 文档 ( https://material-ui.com/guides/right-to-left/ ) 中 RTL 的说明，它根本不使用 createGenerateClassName() 而是导致不同css-vendor.esm.js 中的错误：

Uncaught (in promise) TypeError: Cannot read property '1' of undefined

在https://material-ui.com/guides/migration-v3/的 v3 -> v4 迁移指南中似乎没有提到这一点

index.js

import { MuiThemeProvider, createMuiTheme, CssBaseline } from '@material-ui/core';
import { create } from 'jss';
import rtl from 'jss-rtl';
import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName, jssPreset } from '@material-ui/styles';
import App from './components/App';
import chatloopTheme from './assets/stylesheets/chatloopTheme';

// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

// Custom Material-UI class name generator.
const generateClassName = createGenerateClassName();

const theme = createMuiTheme(chatloopTheme);

// Set up redux store
const store = configureStore();

const jsx = (
  <Provider store={store}>
    <Router history={history}>
      <I18nextProvider i18n={i18n}>
        <JssProvider jss={jss} generateClassName={generateClassName}>
          <MuiThemeProvider theme={theme}>
            <CssBaseline />
            <App />
          </MuiThemeProvider>
        </JssProvider>
      </I18nextProvider>
    </Router>
  </Provider>
);

let hasRendered = false;

const renderApp = () => {
  if (!hasRendered) {
    ReactDOM.render(jsx, document.getElementById('root'));
    hasRendered = true;
  }
};

包.json

{
  "dependencies": {
    "@material-ui/core": "^4.1.1",
    "@material-ui/icons": "^4.2.0",
    "i18next": "^15.0.7",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-i18next": "^10.5.2",
    "react-jss": "^8.6.1",
    "react-scripts": "^3.0.1",   
  },
}

我坚持这一点，非常感谢material-ui社区的帮助。

标签： reactjsmaterial-ui

解决方案

我采取了三个步骤来解决这个问题。

  1. 更新代码以遵循 material-ui v4 实现 RTL 的指南（请参阅https://material-ui.com/guides/right-to-left/）

  2. 将 react-jss 更新到 v10.0.0-alpha.16（请参阅如何将 react-jss 与 MaterialUI 4 一起使用？）

  3. 将 jss 更新到 v10.0.0-alpha.7（参见https://github.com/cssinjs/jss/issues/1041）

不过，这可能不是一个完美的解决方案，因为现在 npm 给了我很多关于需要手动安装较旧的 jss 以满足其他依赖项的警告。

推荐阅读