Rerender component when update theme context?

gndplayground commented 7 years ago

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

delijah commented 7 years ago

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

javivelasco commented 7 years ago

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!

raveclassic commented 7 years ago

@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.

javivelasco / react-css-themr

Rerender component when update theme context? #34