从 0.9 升级到 1 后 Material-ui getMuiTheme 丢失

Posted 2023-02-22

【中文标题】从 0.9 升级到 1 后 Material-ui getMuiTheme 丢失

【英文标题】：Material-ui getMuiTheme missing after upgrading from 0.9 to 1

【发布时间】：2018-04-11 16:51:04

【问题描述】：

未捕获的错误：模块构建失败：错误：ENOENT：没有这样的文件或目录，打开 '/Users/leongaban/projects/go/src/github.com/pizzahutdigital/mythor/node_modules/material-ui/styles/getMuiTheme .js'

目前正在使用http://www.material-ui.com/#/ 的主题、样式和组件来构建应用程序。

但是我需要 0.9 中不存在但在 1.0 beta https://material-ui-next.com/layout/grid/ 中存在的 Grid 组件

【参考方案1】：

getMuiTheme 已在 'material-ui/styles' 中替换为 createMuiTheme

这对我有用：import MuiThemeProvider, createMuiTheme from 'material-ui/styles';

查看文档 -> https://github.com/callemall/material-ui/blob/v1-beta/docs/src/pages/customization/themes.md

（master 和 v1-beta 上的文档不同，请务必查看 v1 分支文档）

【讨论】：

嗯，当我切换到这个错误时，我会用我添加的新代码更新我上面的问题：` index.js:35 Uncaught TypeError: (0 , _styles .createMuiTheme) 不是函数`

啊，createMuiTheme 不存在...我升级了 Material-ui，只有 getMuiTheme 在那里

【参考方案2】：

我找到了"material-grid": "^0.1.0" 并安装了它。

https://www.npmjs.com/package/material-grid

必须将此添加到index.js

import 'material-grid/dist/css/material-grid.css';

必须确保我的 webpack 3 规则在哪里更新

module: 
  rules: [
    
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    ,
    
      test: /\.s?css/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    ,
    
      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)/,
      loader: 'file-loader?name=[path][name].[ext]'
    
  ]

现在网格可以工作了：

<div>
  <Grid>
    <Cell col=12><div className="box">12</div></Cell>
  </Grid>
  <Grid>
    <Cell col=4 tablet=2 ><div className="box">4-2</div></Cell>
    <Cell col=8 tablet=6 ><div className="box">8-6</div></Cell>
  </Grid>
  <Grid>
    <Cell col=1 tablet=8 phone=4><div className="box">1-8-4</div></Cell>
    <Cell col=1 tablet=8 phone=4><div className="box">1-8-4</div></Cell>
    <Cell col=1 tablet=4 phone=4><div className="box">1-8-4</div></Cell>
    <Cell col=1 tablet=4 phone=4><div className="box">1-8-4</div></Cell>
    <Cell col=1><div className="box">1</div></Cell>
    <Cell col=1><div className="box">1</div></Cell>
    <Cell col=1><div className="box">1</div></Cell>
    <Cell col=1><div className="box">1</div></Cell>
    <Cell col=1><div className="box">1</div></Cell>
    <Cell col=1><div className="box">1</div></Cell>
    <Cell col=1><div className="box">1</div></Cell>
    <Cell col=1><div className="box">1</div></Cell>
  </Grid>
</div>

泰德更新

---

以下抛出错误：

import React from 'react';
import ReactDOM from 'react-dom';

import  MuiThemeProvider, createMuiTheme  from 'material-ui/styles';
import * as Colors from 'material-ui/styles/colors';
import  fade  from 'material-ui/utils/colorManipulator';

// Styles
import 'material-grid/dist/css/material-grid.css';
import './styles/main.scss';

// Containers
import App from './containers/App';

const theme = createMuiTheme(
  appBar: 
    color: Colors.cyan400,
    textColor: Colors.white
  ,
  palette: 
    primary1Color: Colors.cyan500,
    primary2Color: Colors.blueGrey700,
    accent1Color: Colors.deepOrange500,
    accent2Color: Colors.blueGrey400,
    accent3Color: Colors.blueGrey500
  ,
  cardMedia: 
    overlayContentBackground: fade(Colors.darkBlack, 0.87)
  
);

ReactDOM.render(
  <MuiThemeProvider theme=theme>
    <App />
  </MuiThemeProvider>,
  document.getElementById('app')
);

index.js:35 Uncaught TypeError: (0 , _styles.createMuiTheme) 不是函数