ReactJS: Render Doesn't Change The Style Value Based On Props

- 1 answer

We're building a wordpress builder on ReactJS and encountered a weird looking problem.
In the screenshot you can see a wrapperStyle object with some CSS styling.The styling should change based on this.props. When this.props changes, the console.log for this object returns

this.props.fullSlideshowWidth = 1920px


this.props.slideshowWidth = 1400px

I expected the style attribute in DOM to change it's value too, however it doesn't change.

For example if I access a full width slideshow page, the style attribute will have max-width: 1920px. If I access a different page with a normal slideshow the style attribute will remain the same, although the value in console.log will change.



Thank you guys who tried to help me, I solved the issue by editing the props: slideshowWidth = {this.state.settings.images.sizes.slideshow.width+'px !important'} I just removed !important out of it and works without a problem, I still do not understand why !important had such a big influence on the prop.