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...
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,
};
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 .
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;