Material UI & React: ThemeManager ist kein Konstruktor

Ich füge Material UI zu einer kleinen React App hinzu, aber ich glaube, dass das Tutorial, das ich durchlaufe, veraltet ist und sie eine ältere Version von Material UI verwenden. Ich bekomme _materialUi2.default.Styles.ThemeManager is not a constructor in der Webkonsole sowie Missing class properties transform.Material UI & React: ThemeManager ist kein Konstruktor

Die Dokumente für Material UI sind nicht so toll, und ich bin mir nicht sicher, ob es eine bessere Ressource gibt, um ihre neueste Dokumentation zu sehen.

Ich glaube, das Problem ist mit ThemeManager.setPalette(). Irgendein Rat?

import React from 'react'; 
import mui from 'material-ui'; 
import MessageList from './MessageList.jsx'; 

// Material UI 
import ThemeManager from 'material-ui/lib/styles/theme-manager'; 
import Colors from 'material-ui/lib/styles/colors'; 
import AppBar from 'material-ui/lib/app-bar'; 
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme'; 

class App extends React.Component { 
    constructor() { 
    super(); 

    ThemeManager.setPalette({ 
     primary1Color: Colors.blue500, 
     primary2Color: Colors.blue700, 
     primary3Color: Colors.blue100, 
     accent1Color: Colors.pink400 
    }); 
    } 

    static childContextTypes = { 
    muitheme: React.PropTypes.object 
    } 

    getChildContext() { 
    return { 
     muiTheme: ThemeManager.getMuiTheme() 
    } 
    } 

    render() { 
    return (
     <div> 
     <AppBar title="Chat App"/> 
     <MessageList /> 
     </div> 
    ); 
    } 
} 

export default App;

Quelle

2016-04-05 Jose

Sie haben Recht, das Tutorial ist veraltet. Importieren Sie es wie folgt aus:

import ThemeManager from 'material-ui/lib/styles/theme-manager';

auch: http://www.material-ui.com/#/customization/themes

Quelle

2016-04-05 21:22:10 JordanHendrix

Ja, ich hatte bereits hinzugefügt, dass (siehe Code oben), aber ich bin mir nicht sicher, was sonst veraltet sein könnte. Ich habe mir dieses Beispiel angeschaut, aber darin benötigen sie eine eigene (eigene) Theme-Datei ... von der ich nicht sicher bin, wie sie aussehen würde. – Jose

// der Schlüssel durch den Kontext muss aufgerufen werden "muiTheme" – JordanHendrix

versuchen Sie, Ihre Komponente so viel wie die in der Verknüpfung wie möglich, sehe ich, dass ein Tippfehler oben, wo Sie alle Kleinbuchstaben im Kontext verwenden – JordanHendrix

Ja, das Tutorial: Der Schlüssel durch Kontext übergeben muss "muiTheme"

Check out Nummer 1 auf dieser Seite der docs genannt werden ist veraltet.

Statt dies zu tun:

ThemeManager.setPalette({ 
     primary1Color: Colors.blue500, 
     primary2Color: Colors.blue700, 
     primary3Color: Colors.blue100, 
     accent1Color: Colors.pink400 
    });

Sie können Ihr Thema in einem separaten Ordner wie Theme.jsx

import Colors from 'material-ui/lib/styles/colors'; 

export default { 
    palette: { 
    primary1Color: Colors.blue500, 
    primary2Color: Colors.blue700, 
    primary3Color: Colors.blue100, 
    accent1Color: Colors.pink400 
    } 
};

dann in der Haupt App.jsx, importieren Theme.jsx und setzen Sie ihn auf getMuiTheme(MyTheme)

definieren

import React, {Component} from 'react'; 
import MessageList from './MessageList.jsx'; 

import ThemeManager from 'material-ui/lib/styles/theme-manager'; 
import AppBar from 'material-ui/lib/app-bar'; 
import MyTheme from './Theme.jsx'; 

export default class App extends Component { 
    constructor(){ 
    super(); 
    } 

    static childContextTypes = { 
    muiTheme: React.PropTypes.object 
} 

getChildContext(){ 
    return { 
    muiTheme: ThemeManager.getMuiTheme(MyTheme) 
    }; 
} 

    render(){ 
    return(
     <div> 
      <AppBar title="Chat App"/> 
      <MessageList /> 
     </div> 

    ); 
    } 

}

T sein sollte das Problem lösen

Quelle

2016-05-01 09:51:48

Material UI & React: ThemeManager ist kein Konstruktor

Antwort

Verwandte Themen