tsx

Extending React's Type System for Custom CSS Variables

When using custom CSS variables in React inline styles, TypeScript complains because CSSProperties doesn't know about custom properties.

Use TypeScript module augmentation to extend React's CSSProperties interface:

function Component() {
  return (
    <div
      style={{
        "--parallax-y": "-420px", // OK
        "--other-var": "42px", // Error
      }}
    />
  )
}

declare module "react" {
  interface CSSProperties {
    [`--parallax-y`]?: `${number}px`
  }
}
reacttypescriptcss
lubosmato