Question

我有以下使用自定义材质UI主题的React组件

const getTheme = name =＆gt; themes.filter（theme =＆gt; 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);

当我更新设置页面上的主题名称时，状态会更新（通过Redux日志记录确认），但主题不会更新。但是，当我离开页面时，将应用新主题。

据推测，状态的改变不会导致Root组件重新渲染，或者在应用此方法时我不理解

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

知道如何让主题更新它在状态中更改的实例吗？

Answer 1

原来我还必须将更新后的主题作为道具传递给我的App组件（在层次结构中的Root下面）。看起来像是通过上下文传递主题并更改配置主题的组件中的prop不足以触发所需更新的事实。

如何通过Redux商店动态更新Material UI主题？

1 个答案: