<div id="root"></div>
.demo-color {
  flex: 0 0 auto;
  font-size: 16px;
  margin: 24px auto;
  width: 80%;
}

.demo-box {
  background: var(--boxColor);
  border: 1px solid black;
  height: 120px;
  margin-top: 24px;
  position: relative;
  width: 120px;
}
View Compiled
import React, { useState } from "https://cdn.skypack.dev/react@~17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@~17.0.1";
import { useTheme } from "https://cdn.skypack.dev/css-vars-hook@~0.2.4";

// Define theme object where key name is CSS value name without `--` prefix.
const theme = { boxColor: "yellow" };

const Demo = () => {
  const [colorValue, setColorValue] = useState(theme.boxColor);

  // Call useTheme hook with theme object as an argument. 
  const { setRef, setVariable } = useTheme(theme);

  // Define click handler. We are useing setVariable function returned from thw hook here
  const handleClick = () => {
    // Change CSS variable `--boxColor` to the value from the user input.
    setVariable("boxColor", colorValue);
  };

  return (
    // Ref is set via ref callback. 
    <div className="demo-color" ref={setRef}>
      <div>
        Set box color. Needs to be a valid CSS color (name, HEX, rgba etc).
      </div>
      <input
        value={colorValue}
        id="colorName"
        type="text"
        onChange={(e) => {
          setColorValue(e.target.value);
        }}
      />
      <button
        onClick={handleClick}
        type="button"
      >
        Set
      </button>
      <div className="demo-box" />
    </div>
  );
};

// They don't necessarily need to take props
// This one also has an explicit return
const App = () => {
  return (
    <div className="box">
      <Demo text="Jeff Goldblum says:" />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.