web-dev-qa-db-de.com

Ich kann nach dem Update auf [email protected] keine material-ui-Komponenten verwenden

Ich habe diese Nachricht in meiner Konsole erhalten:

Fehlgeschlagene Kontexttypen: Erforderlicher Kontext muiTheme wurde nicht in .__ angegeben. AppBar

AppBar.js: 158 Nicht abgerufener TypeError: Die Eigenschaft 'prepareStyles' .__ kann nicht gelesen werden. von undefined

Ich habe nur eine AppBar in meiner Komponente Ich denke, es sollte funktionieren, aber ... Hier mein sehr einfacher Code:

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


    export class MyComponent extends React.Component {

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

                </div>
            );
        }

    }

danke fürs Helfen...

20
Yiman Kaing

Mit [email protected] wurden einige Dinge geändert.

Sie können sich den Link unten ansehen, um weitere Informationen zu erhalten . https://github.com/callemall/material-ui/blob/master/CHANGELOG.md

Daher wird Ihr Code mit diesen Änderungen zu:

    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,
        };
32
Antonis Zisis

jetzt in der 0.15.0 können Sie muiThemeProvider verwenden:

...

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>
)

...

Sie müssen also nicht den kindgerechten Kontext angeben Weitere Informationen in Dokumentation .

20
Dusan Plavak

Importieren Sie MuiThemeProvider und wickeln Sie dann die AppBar der Material-Ui-Komponente mit MuiThemeProvider ein. 

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;
1