CssVariablesProvider.js

import { Component, PropTypes } from 'react';

function toCssKey(key) {
    return `--${key}`;
}

export default class CssVariablesProvider extends Component {
    static propTypes = {
        variables: PropTypes.objectOf(PropTypes.string).isRequired,
        children: PropTypes.element.isRequired,
    };

    componentWillMount() {
        this.updateCssVariables({}, this.props.variables || {});
    }

    componentWillReceiveProps(props) {
        this.updateCssVariables(this.props.variables || {}, props.variables || {});
    }

    updateCssVariables(oldVariables, newVariables) {
        const oldKeys = Object.keys(oldVariables);
        const newKeys = Object.keys(newVariables);
        const keysToRemove = oldKeys.filter(key => !newKeys.includes(key));
        keysToRemove.forEach(key => {
            document.documentElement.style.removeProperty(toCssKey(key));
        });
        const keysToUpdate = newKeys.filter(key => oldVariables[key] !== newVariables[key]);
        keysToUpdate.forEach(key => {
            const cssKey = toCssKey(key);
            document.documentElement.style.removeProperty(cssKey);
            document.documentElement.style.setProperty(cssKey, newVariables[key]);
        });
    }

    render() {
        return this.props.children;
    }
}