extending react style prop with typescript

Question

What is the best way to extend the style prop in react to accept css variables as keys?

<button style={{ "--color": "red", ...props.style }} />

Answer 1

You'll need to add to the CSSProperties interface, which can be done pretty easily like so

declare module "react" {
  interface CSSProperties {
    /**
     * Add your custom properties here
     */
    "--x": string | number;
  }
}

Answer 2

You can do the following:

 render() {
   var style = {  "--color": "red", ...props.style } as React.CSSProperties;
   return (<button style={style} />);
  }

More in React.CSSProperties type definition: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/8871b1e8938a1ed698ec8a88c77ee169294e45d4/types/react/index.d.ts#L974-L983