Fix CSS variable keys in style attributes in React and Typescript

Josh Comeau has a wonderful article about using CSS variables in style attributes in React props that has changed the way I write CSS in React (link).

Unfortunately, when using TypeScript, this method leads to a build error.

The Error

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'.

How to Fix it

There are two ways to fix the build error:

• cast the style object to React.CSSProperties
• create an interface that extends React.CSSProperties

Cast the style object to React.CSSProperties

The part to note here is that the style object is followed by as React.CSSProperties:

 <StyledComponent style={{ "--color": colorValue } as React.CSSProperties}>
 {/* details... */}
 </StyledComponent>

The downside of casting is that it will allow any key arbitrarily. If you want to be explicit about what keys are available, try the next method, Extending CSSProperties.

Create an interface that extends React.CSSProperties

Extending CSSProperties has the advantage of allowing you to say which keys are acceptable:

import React, { CSSProperties } from 'react';

export interface CSSPropertiesWithVars extends CSSProperties {
  '--color': string;
  // any other vars you may use
}