# Fix CSS variable keys in style attributes in React and Typescript

> How to define CSS variables in style attributes in react and Typescript

Source: https://curiouslychase.com/engineering/fix-css-variable-keys-in-style-attributes-in-react-and-typescript/

[Josh Comeau](https://twitter.com/JoshWComeau) 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](https://www.joshwcomeau.com/css/styled-components/)).

Unfortunately, when using TypeScript, this method leads to a build error.
# The Error
```shell
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`:

```tsx
 <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:

```ts
import React, { CSSProperties } from 'react';

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