Material-ui getMuiTheme отсутствует после обновления с 0,9 до 1

Uncaught Ошибка: сборка модуля не удалась: Ошибка: ENOENT: нет такого файла или каталога, откройте '/Users/leongaban/projects/go/src/github.com/pizzahutdigital/mythor/node_modules/material-ui/styles/getMuiTheme.js'

В настоящее время для создания приложения используются тема, стиль и компоненты из http://www.material-ui.com/.

Однако мне нужен компонент Grid, который не существует в 0.9 но существует здесь, в 1.0 beta https://material-ui-next.com/layout/grid/

Источник

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) не является функцией

Источник

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)

Источник
Другие вопросы по тегам