How to allow style to take css custom properties in react

You will get an error trying to define css custom properties (css variables) inline.

TS2326: Types of property 'style' are incompatible.
  Type '{ '--color': string; }' is not assignable to type 'CSSProperties'.
    Object literal may only specify known properties, and '--color' does not exist in type 'CSSProperties'.

To allow any custom property create a new type definition file @types/css.d.ts and extend react.CSSProperties to allow custom properties.

import "react";
 
declare module "react" {
  interface CSSProperties {
    [key: `--${string}`]: string | number;
  }
}

This will allow any css custom property to be used in the style prop.

If you want to restrict the custom properties to a specific set of properties, you can use specific property names instead.

import "react";
 
declare module "react" {
  interface CSSProperties {
    "--color": string;
  }
}