CSS Custom Properties in React with TypeScript

README.md

CSS Custom Properties in React with TypeScript

Ever encounter the following error when trying to do the following?

<div style={{ '--height': '32px' }}>
              ~~~~~~~~~~~~~~~~~~
// Type '{ "--height": string; }' is not assignable to type 'Properties<string | number, string & {}>'.
//   Object literal may only specify known properties, and '"--height"' does not exist in type 'Properties<string | number, string & {}>'.

To fix this, create a react.d.ts file in your project (the name doesn’t matter; just make sure it’s in TSConfig’s includes).

declare module "react" {
  // allow CSS custom properties
  interface CSSProperties {
    [varName: `--${string}`]: string | number | undefined;
  }
}

export {}; // if this file doesn’t `export` anything else, be sure to add this so it gets picked up

The best part about [varName: `--${string}`] is that it only allows CSS custom properties to your style object. Some solutions offer [index: string] which will ⚠️ disable typechecking entirely for the style object. Obviously not ideal!