J'ai eu ce message dans ma console:
Types de contexte en échec: Le contexte requis
muiTheme
n'a pas été spécifié dansAppBar
AppBar.js: 158 Uncaught TypeError: Impossible de lire la propriété 'prepareStyles' de non défini
J'ai juste un AppBar dans mon composant Je pense que cela devrait fonctionner mais ... Voici mon code très simple:
import React from 'react';
import {AppBar} from 'material-ui';
export class MyComponent extends React.Component {
render() {
return (
<div>
<AppBar
title="Title"
/>
</div>
);
}
}
merci pour ton aide...
Avec [email protected], quelques modifications ont été apportées.
Vous pouvez consulter le lien ci-dessous pour plus de détails . https://github.com/callemall/material-ui/blob/master/CHANGELOG.md
Par conséquent, avec ces modifications, votre code devient:
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,
};
maintenant dans 0.15.0, vous pouvez utiliser 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>
)
...
Il n'est donc pas nécessaire de fournir manuellement le contexte aux enfants . Plus d'infos dans documentation .
Importez MuiThemeProvider, puis enveloppez le composant Material-ui AppBar avec 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;