reactjs - framework - No puedo usar componentes material-ui después de actualizar a [email protected]

material ui package json

Question

Recibí este mensaje en mi consola:

Tipos de contexto fallidos: el contexto requerido muiTheme no se especificó en AppBar

AppBar.js: 158 Uncaught TypeError: No se puede leer la propiedad ''prepareStyles'' de undefined

Acabo de tener una barra de aplicaciones en mi componente. Creo que debería funcionar pero ... aquí mi código muy simple:

import React from ''react'';
import {AppBar} from ''material-ui'';


    export class MyComponent extends React.Component {

        render() {
            return (
                <div>
                    <AppBar
                        title="Title"
                    />

                </div>
            );
        }

    }

gracias por ayudar...

Answer 1

Con [email protected] se cambiaron algunas cosas.

Puede echar un vistazo en el enlace de abajo para más detalles. https://github.com/callemall/material-ui/blob/master/CHANGELOG.md

Por lo tanto con esos cambios tu código se convierte en:

    import React from ''react'';
    import AppBar from ''material-ui/AppBar'';
    import baseTheme from ''material-ui/styles/baseThemes/lightBaseTheme'';
    import getMuiTheme from ''material-ui/styles/getMuiTheme'';

        export class MyComponent extends React.Component {

            getChildContext() {
                return { muiTheme: getMuiTheme(baseTheme) };
            }

            render() {
                return (
                    <div>
                        <AppBar
                            title="Title"
                        />

                    </div>
                );
            }        
        }

        MyComponent.childContextTypes = {
            muiTheme: React.PropTypes.object.isRequired,
        };

Answer 2

Importe MuiThemeProvider y luego ajuste el componente material-ui AppBar con MuiThemeProvider.

import React, { Component } from ''react'';
import AppBar from ''material-ui/AppBar'';
import MuiThemeProvider from ''material-ui/styles/MuiThemeProvider'';
import ''./App.css'';

class App extends Component {

  render() {

    return ( 
      <MuiThemeProvider>
        <div>
          <AppBar title = "Title" />
        </div> 
      </MuiThemeProvider>
    );
  }
}

export default App;

Answer 3

ahora en el 0.15.0 puede usar muiThemeProvider:

...

import getMuiTheme from ''material-ui/styles/getMuiTheme'';
import MuiThemeProvider from ''material-ui/styles/MuiThemeProvider'';
import MyAwesomeReactComponent from ''./MyAwesomeReactComponent'';

const App = () => (
 <MuiThemeProvider muiTheme={getMuiTheme()}>
    <MyAwesomeReactComponent />
 </MuiThemeProvider>
)

...

Por lo tanto, no tiene que proporcionar contexto a los niños de forma manual. Más información en la documentation .