我不能使用材料的UI組件更新後[email protected]

我在我的控制檯此消息：我不能使用材料的UI組件更新後[email protected]

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

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

我只是有一個AppBar在我的組件我想它應該工作，但... 這裏我非常簡單的代碼：

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


    export class MyComponent extends React.Component { 

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

       </div> 
      ); 
     } 

    }

感謝幫助...

來源

2016-04-30 Yiman Kaing

隨着[email protected]一些事情發生了變化。

你可以看看下面的鏈接瞭解更多詳情。 https://github.com/callemall/material-ui/blob/master/CHANGELOG.md

因此這些變化你的代碼變成：

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

來源

2016-04-30 13:33:58

好吧，我明白了！非常感謝！ –

它解決了我的問題。謝謝！ –

爲什麼他們使它更復雜？如果我可以編寫更少的代碼來實現它，那將是非常好的。 – newguy

現在在0.15.0可以使用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> 
) 

...

所以你不必向兒童提供上下文manualy 。更多的信息在documentation。

來源

2016-06-15 08:15:34

你自己試過這個嗎？我的工作還在繼續...... –

@BruceSun是的，我在2個項目中使用它。 –

我找到了原因 - 如果我使用React.createClass（）定義組件，它不起作用，但如果我創建一個擴展React.Component的ES6類，則工作正常。我沒有找到任何關於此的文檔。 –

導入MuiThemeProvider，然後用MuiThemeProvider包裝material-ui組件AppBar。

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;

來源

2018-03-06 19:19:30

我不能使用材料的UI組件更新後[email protected]

回答

相關問題