Nie mogę korzystać z komponentów materiał-ui po aktualizacji do [email protected]

Question

Mam ten post w moim konsoli:

Failed Context Types: Required context muiTheme was not specified in AppBar

AppBar.js:158 Uncaught TypeError: Cannot read property 'prepareStyles' of undefined

mam tylko takie AppBar w moim Komponentu myślę to powinno działać, ale ... tutaj mój bardzo prosty kod:

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


    export class MyComponent extends React.Component { 

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

       </div> 
      ); 
     } 

    } 

dzięki za pomoc ...

Answer 1

Z material-ui@0.15.0.beta-1 kilka rzeczy zostały zmienione.

Możesz zobaczyć link poniżej, aby uzyskać więcej informacji. https://github.com/callemall/material-ui/blob/master/CHANGELOG.md

Dlatego z tych zmian staje się kod:

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

teraz w 0.15.0 można użyć 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> 
) 

... 

Więc nie trzeba, aby zapewnić kontekst Childrens manualy . Więcej informacji pod numerem documentation.

Answer 3

Zaimportuj MuiThemeProvider, a następnie zawiń komponent material-ui AppBar w 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;