Question

未捕获错误：模块构建失败：错误：ENOENT：没有这样的文件或目录，打开&U39/ / / / / / / / / / / / / / /风格/ getMuiTheme.js＆＃39;

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

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

中存在的网格组件

Answer 1

getMuiTheme已被createMuiTheme

中的'material-ui/styles'取代

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

参见文档 - ＆gt; 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>

Ted更新

以下引发错误：

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未捕获的TypeError：（0，_styles.createMuiTheme）不是函数

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

2 个答案:

Ted更新