Re-render color props on state change

[maheshwarimrinal]

Describe the bug Re-render issue when state change

To Reproduce Try changing colors with state change, suppose I toggle light and dark mode in webapp but if other components re render the timeline don't with expected colors

Expected behavior Colors should change with the props passed

Desktop (please complete the following information):

• OS: every OS
• Browser every browser

Smartphone (please complete the following information): Every other smartphone

[prabhuignoto]

can you update the lib to the latest version 1.12.0 and check if this is still happening?

please reopen if you have queries or issues.

[mthanasi]

Yes, the issue is still happening. I'm toggling between dark/light theme and from what I noticed:

• primary color doesn't update for cardSubtitle however it does update correctly for card title
• cardBgColor doesn't update correctly
• cardForeColor doesn't update correctly

You need to reload the page or switch to another route first to get the right theme. I tried both on theme switch and neither works :

1. render an entire another Chrono component with a new theme object
2. tweak directly the theme prop

[prabhuignoto]

@mthanasi can you post me the link to your repo where this happens.

[mthanasi]

@prabhuignoto The repo is private but I recreated the component and the issue in this codesandbox : https://codesandbox.io/s/muddy-wildflower-vlr7m?file=/src/index.js

[gutsytechster]

Do we have a workaround for it?

[sandheepsebastain]

@gutsytechster I managed to get around this. It is a bit messy and you may lose the card border, definitely not an optimal solution. But if you set the cardForeColor and cardBGColor to nonsensical values, then the card will revert to using the parent's color scheme. Then you can assign the color to the parent based on the color mode. https://codesandbox.io/s/condescending-lichterman-lik4wz?file=/src/app.js

[SiDDhartharG]

You can change key(by hooks) in react component it will render