Material-ui getMuiTheme missing after upgrading from 0.9 to 1 - material-ui

Question

Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open '/Users/leongaban/projects/go/src/github.com/pizzahutdigital/mythor/node_modules/material-ui/styles/getMuiTheme.js'
Been using the theme, style and components from http://www.material-ui.com/#/ to build a app at the moment.
However I need the Grid component which doesn't exist in 0.9 but exists here in the 1.0 beta https://material-ui-next.com/layout/grid/

Answer 1

getMuiTheme has been replaced by createMuiTheme in 'material-ui/styles'
This worked for me : import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
See Documentation -> https://github.com/callemall/material-ui/blob/v1-beta/docs/src/pages/customization/themes.md
(Docs on master and v1-beta differ, be sure to check out the v1 branch docs)

Answer 2

I found "material-grid": "^0.1.0" and installed that.
https://www.npmjs.com/package/material-grid
Had to add this to index.js
import 'material-grid/dist/css/material-grid.css';
Had to make sure my webpack 3 rules where updated
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]'
}
]
}
Now the grid will work:
<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>
Update for Ted
The following throws an error:
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) is not a function