reactjs - 动态更改 Material-ui 主题 --> 不会影响 child

Question

我正在开发一个使用material-ui的react/redux应用程序。

我正在使用上下文(根据文档)在我的CoreLayout组件(我的顶层组件)中设置主题。这在初始加载时按预期工作。

我希望能够在运行时切换主题。当我选择新主题时，我的 redux 存储会更新，因此会触发我的组件更新。问题是我的 CoreLayout 组件的子组件没有受到影响——这是第一次!如果我反复更改主题(使用发送 redux-action onChange 的选择列表)，子项就会更新。如果子组件位于我的项目层次结构中的下 2 层，则它会在 2 次操作调用后更新 - 因此上下文的传递方式存在一些问题。

我的 CoreLayout.js 组件

import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import ThemeManager from 'material-ui/lib/styles/theme-manager';

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

export class CoreLayout extends React.Component {
    getChildContext() {
        return {
            muiTheme: ThemeManager.getMuiTheme(this.props.uiStatus.get("applicationTheme").toJS())
        };
    }

    render () {
        return (
            <div className='page-container'>
                { this.props.children }
            </div>
        );
    }
}

CoreLayout.propTypes = {
   children: PropTypes.element
};

CoreLayout.childContextTypes = {
    muiTheme: PropTypes.object
};

export default connect(mapStateToProps)(CoreLayout);

我的子组件之一 (LeftNavigation.js)

import React from "react";
import { connect } from 'react-redux';


import { List, ListItem } from 'material-ui';

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

export class LeftNavigation extends React.Component {
    render () {

        return (
            <div className="left-pane-navigation">
                <List subheader="My Subheader" >
                    <ListItem primaryText="Search" />
                    <ListItem primaryText="Performance Load" />
                </List>
            </div>
        );
    }
}

LeftNavigation.contextTypes = {
    muiTheme: React.PropTypes.object
};

export default connect(mapStateToProps)(LeftNavigation);

我可以通过 this.context.muiTheme 访问位于上下文中的主题。我可以通过在每个子组件中使用 getChildContext() 的另一个实例来让组件更新主题，但我将拥有大量组件，我非常希望避免这样做。

当我更改主题时，会调用 CoreLayout 组件的 getChildContext 方法，并且所有子组件都会按预期重新渲染。

有什么想法吗？

更新:它在移动设备上按预期工作(至少 iOS)

Answer 1

您可以使用 muiThemeProvider 来避免将 getChildContext 添加到任何子组件，提供程序会为您完成此操作。

...

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>
)

...

更多信息请参见documentation .