Rerender component when update theme context?

[Giang Nguyen]

Hi, I'm making an app base on react-toolbox. My app has 2 themes. I want to add a button to change between themes. My stack includes react-router, redux, redux-saga.
When user changes theme, my app will dispatch an action and return props to component and send to Theme Provider like below.

        let ttheme = this.props.data || {
                RTButton: require('./themes/mui/main/input.scss')
            };
        return (
            <ThemeProvider theme={ttheme}>
                <div>
                    {this.props.children}
                </div>
            </ThemeProvider>
        )

But when changed a theme, nothing happen. But when I change to another route. It seems the new theme is applied. So when I changed theme, ThemeProvider got a new them object, but it doesn't apply immediately. I guess because child component uses context so It won't update immediately.

Thank you for you plugin. Have a nice day

[Raffael]

Related to facebook/react#2517.

We need an event that informs us about changes within the theme to forceUpdate the consuming component.

[Javi Velasco]

What could be the API for this? At the end I think that you have control over it. Changes in context are not propagated so maybe you can do something else from outside. Controlling when the change happens is as easy as wrap the Provider. If there is something we can do I'll be happy to accept a PR!

[Kirill Agalakov]

@delijah It seems that you are rendering Router inside ThemeProver. This can be solved by rendering ThemeProvider inside root route, for example in an App component which is bound to / route.