Inject styles like child components

ElementContext.jsx

var ElementContext = React.createContext(null);

class ElementContextComponent extends React.Component {
  constructor(props) {
    super(props);
    this.elementRef = React.createRef();
  }
  render() {
    return (
      <ElementContext.Provider value={{elRef: this.elementRef, styles: {}, timeout: null}}>
        {this.props.render && this.props.render({ref: this.elementRef})}
      </ElementContext.Provider>
    );
  }
}

class StyleElement extends React.PureComponent {
  render() {
    return (
      <ElementContext.Consumer>
        {(obj) => {
          if (obj) {
            Object.assign(obj.styles, this.props.provideStyle);
            if (!obj.timeout) {
              obj.timeout = setTimeout(() => {
                clearTimeout(obj.timeout);
                obj.timeout = null;
                console.log("Setting styles");
                var el = obj.elRef.current, styles = obj.styles;
                if (el) {
                  for (var key in styles) {
                    el.style[key] = styles[key];
                  }
                }
              });
            }
          }
          return null;
        }
      }</ElementContext.Consumer>
    );
  }
}

var ElementContextButton = (props) => (
    <ElementContextComponent render={({ref}) => (
      <button type="button" ref={ref}>{props.children}</button>
    )} />
);

var Transform = () => (<StyleElement provideStyle={{transform: "rotate(30deg)"}} />);
var Filter = () => (<StyleElement provideStyle={{filter: "blur(3px)"}} />);

ReactDOM.render(<ElementContextButton>
  <Transform />
  <Filter />
  Hello
</ElementContextButton>, document.getElementById("app"));