2017-10-04 64 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

原来,我不得不将更新后的主题作为道具传递给我的应用程序组件(仅位于层次结构中的根下面)。看起来好像是通过上下文传递主题并更改配置主题的组件中的道具不足以触发所需的更新。