extending react style prop with typescript

Issue

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

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

Solution

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

Answered By - Kanishk Anand