从0.9升级到1后，缺少Material-ui getMuiTheme

Question

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

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

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

Answer 1

getMuiTheme已取代createMuiTheme的'material-ui/styles'

这为我工作： 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分支文档）

Answer 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) 不是函数