How to change change object with styles in component (JSS, dynamic styles)?

Question

css

There is an object with styles

const styles = {
    '@global': {
        '.slider-gallery.slick-slider': {
            '& .slick-arrow': {
                width: '200px',
                height: '200px'
            },
            '& .slick-arrow.slick-prev': {
                backgroundPosition: 'center center',

                '&:before': {
                    display: 'none'
                }
            },
            '& .slick-arrow.slick-next': props => ({
                background: `url(${props.imgLeft})`,

                '&:before': {
                    display: 'none'
                }
            }),
        }
    }
};

I want to pass it a value from the background from the component:

let b64 = '';

class SliderGallery extends Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        const icon = document.querySelector('.slick-slider__icon_left');
        const xml = new XMLSerializer().serializeToString(icon);
        const svg64 = btoa(xml);
        const b64Start = 'data:image/svg+xml;base64,';

        b64 = b64Start + svg64;
    }

    render() {

        let { settings, children } = this.props;

        return (
            <React.Fragment>
                <Slider {...settings}>
                    { children }
                </Slider>
                <Icon
                    name={'chevronleftblack'}
                    className={'slick-slider__icon_left'}
                />
            </React.Fragment>
        )
    }
}

SliderGallery.defaultProps = {
    imgLeft: b64
};

export default withStyles(styles)(SliderGallery);

I understand that I will not pass it on like that. Because there is no component update. How to do it right?

Answer 1

1. It is not possible to change an object by changing the primitive that was used to create it, since the value of the primitive is simply copied.
Demo
Copy by value
2. You can't change the component properties object, only pass the updated object when redrawing.
In your case, the easiest way to change the property is through the state of the parent, passing the change callback to the component:

<SliderGallery imgLeft={this.state.imgLeft} changeImgLeft={this.changeImgLeft} />