2017-10-04 67 views
0

我有以下使用自定義材質UI主題的React組件如何通過Redux商店動態更新Material UI主題?

const getTheme = name => themes.filter(theme => theme.name === name)[0] ||主題[0];

const Root = props => (
    <MuiThemeProvider muiTheme={getMuiTheme(getTheme(props.theme).data)}> 
     <Router history={history}> 
      <Switch> 
       <Route component={AppContainer}/> 
      </Switch> 
     </Router> 
    </MuiThemeProvider> 
); 

它是由一個容器

const mapStateToProps = state => ({ 
    theme: state.settings.theme 
}); 

const RootContainer = connect(mapStateToProps, {})(Root); 

喂當我更新設置頁面的狀態更新(通過終極版記錄確認)上的主題名稱,但沒有更新的主題。但是,當我離開頁面時,會應用新主題。

想必在狀態的變化不引起Root組件重新渲染,或有什麼東西我不要在此應用

<MuiThemeProvider muiTheme={getMuiTheme(getTheme(props.theme).data)}> 

任何想法我如何能得到這個主題的理解方式更新它在狀態中更改的實例?

回答

0

原來,我不得不將更新後的主題作爲道具傳遞給我的應用程序組件(僅位於層次結構中的根下面)。看起來好像是通過上下文傳遞主題並更改配置主題的組件中的道具不足以觸發所需的更新。