153

I want to define jsx like this:

<table style={{'--length': array.lenght}}>
   <tbody>
      <tr>{array}</tr>
   </tbody>
</table>

and I use --length in CSS, I also have cells that have --count that shows count using CSS pseudo selector (using the counter hack).

but typescript throws error:

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

is it possible to change type of style attribute to accept CSS variable (custom properties) or is there a way to force any on style object?

5
  • why do you want css variables ? Because you cannot use CSS variables in style tag. It accepts CSS properties only. You can create a variable like this const length = array.length and use that length in css ? Aug 24, 2018 at 13:17
  • i believe this is discussed here github.com/facebook/react/issues/6411
    – SGhaleb
    Aug 24, 2018 at 13:27
  • @SGhaleb I've seen this, in my code css variables works they appear in DOM and css is applied, but they give error in webpack (it look like error but compile pass) when building the app, so it's the problem with typescript typings not with react.
    – jcubic
    Aug 24, 2018 at 14:01
  • 1
    @KyawSiesein they problem with js variables is that you can't use them in ::before and ::after.
    – jcubic
    Aug 24, 2018 at 14:03
  • 1
    @KyawSiesein this is completely valid and normal in Design Systems. You certainly CAN define local CSS Variables inline. Oct 13, 2022 at 10:28

9 Answers 9

254

Like this:

function Component() {
  const style = { "--my-css-var": 10 } as React.CSSProperties;
  return <div style={style}>...</div>
}

Or without the extra style variable:

function Component() {
  return <div style={{ "--my-css-var": 10 } as React.CSSProperties} />
}
0
44

If you go to the definition of CSSProperties, you'll see:

export interface CSSProperties extends CSS.Properties<string | number> {
    /**
     * The index signature was removed to enable closed typing for style
     * using CSSType. You're able to use type assertion or module augmentation
     * to add properties or an index signature of your own.
     *
     * For examples and more information, visit:
     * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
     */
}

That page gives examples of how to solve the type error by augmenting the definition of Properties in csstype or casting the property name to any.

1
  • 5
    Link is out of date, if it was useful before it should likely be pointed at a commit rather than at master.
    – user3282374
    Apr 23, 2021 at 3:14
40

You can add a type assertion to the variable. i.e. {['--css-variable' as any]: value }

<table style={{['--length' as any]: array.length}}>
   <tbody>
      <tr>{array}</tr>
   </tbody>
</table>
1
  • 9
    suppressing typescript error is not the best solution
    – Beraliv
    Dec 12, 2021 at 13:22
36

Casting the style to any defeats the whole purpose of using TypeScript, so I recommend extending React.CSSProperties with your custom set of properties:

import React, {CSSProperties} from 'react';

export interface MyCustomCSS extends CSSProperties {
  '--length': number;
}

By extending React.CSSProperties, you will keep TypeScript's property checking alive and you will be allowed to use your custom --length property.

Using MyCustomCSS would look like this:

const MyComponent: React.FC = (): JSX.Element => {
  return (
    <input
      style={
        {
          '--length': 300,
        } as MyCustomCSS
      }
    />
  );
};
6
  • This is interesting because now the style can have only specific custom properties. Not sure how another answers handle this, I also don't have any react/typescript project to test.
    – jcubic
    Jan 29, 2021 at 21:10
  • @jcubic because MyCustomCSS extends from CSSProperties other properties should be assignable as well.
    – Benny Code
    Mar 4, 2021 at 10:09
  • I mean that I like the solution because I can only use custom properties I've defined in the type, so If I set --length: number; this will be the only custom property I can use. I know that rest of css works fine this is how extend works any language. by "can have only specific custom properties" I meant that for all custom properties in CSS only those that was defined by the type will be valid.
    – jcubic
    Mar 4, 2021 at 12:20
  • 9
    TS 4.4 supports template literal types, so something like this can be written instead of explicitly specifying all custom variables: [key: `--${string}`]: string | number;. One liner: type MyCustomCSS = CSSProperties & Record<`--${string}`, number | string>;
    – brc-dd
    Sep 25, 2021 at 16:30
  • I prefer this one liner solution (@brc-dd) I have tested and I confirm it works perfectly!
    – Sparker73
    Sep 25, 2021 at 20:12
31

you can simply put this module declaration merge using string templates at the top of the file or in any .d.ts file, then you will be able to use any CSS variable as long it starts '--' and that is string or number

import 'react';

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

for example

<div style={{ "--value": percentage }} />
8
  • 1
    So you suggest to overwrite builtin type, what if you have 10 modules and each use different variables?
    – jcubic
    Dec 17, 2021 at 19:45
  • as you may know typescript interfaces are merged by default, they do not overwrite the existing, they extend them, source: typescriptlang.org/docs/handbook/declaration-merging.html
    – mindlid
    Dec 17, 2021 at 22:59
  • I ended up using this solution, thanks. One thing to note: it's possible to pass in values with more dashes than two (as a dash is a string). For example, this will be fine: style={{ ---color: 'red' }}. This isn't an issue for my use case, but I just wanted to add this as a note if someone else wonders the same. Dec 23, 2021 at 9:07
  • yes, you can use any valid javascript string as pattern in the typescript template literal string
    – mindlid
    Dec 28, 2021 at 19:11
  • 2
    Remember to place import 'react' at the top!
    – Daniel
    Jan 31, 2022 at 17:48
6

try:

<table style={{['--length' as string]: array.lenght}}>
  ...
</table>
5
import "react";

type CustomProp = { [key in `--${string}`]: string };
declare module "react" {
  export interface CSSProperties extends CustomProp {}
}

put this in your global.d.ts file

6
  • 1
    How is it better than the existing answers ?
    – XouDo
    Sep 27, 2021 at 12:31
  • I don't think it's a good idea to overwrite react typescript types. So I would say it's a canonical example of a kludge.
    – jcubic
    Sep 27, 2021 at 13:07
  • 1
    @jcubic the React devs disagree with you, as evidenced by the comment quoted in stackoverflow.com/a/52013197/247482 Dec 15, 2021 at 10:06
  • 1
    @flyingsheep this is not overwriting the type, it only shows how the code looks like.
    – jcubic
    Dec 15, 2021 at 11:18
  • 1
    Why do you hint at the solution you came up with and call it “the actual” solution? We’re in real life, not an academic test. Therefore there’s only your solution, not the, and if you feel like it’s worth sharing, just do it. I didn’t sign up for a course, don’t treat me like a student. Dec 16, 2021 at 13:24
2

I would like to add a different approach by using document.body.style.setProperty, and maybe if your css variable will be affected by certain props you can put it in a useEffect like this:

useEffect(() => {
    document.body.style.setProperty(
      "--image-width-portrait",
      `${windowSize.width - 20}px`
    );
}, [windowSize])

Later inside your css file you can call it like this:

width: var(--image-width-portrait);
1
  • This is a component that can have multiple instances on the page.
    – jcubic
    May 24, 2022 at 17:10
0

These are (well almost) all valid approaches to solve this, but there is another.

You could add the ref to your element and set the style where ever. I know that this would be quite possibly an improper use of useEffect but if you have something in useEffect that needs to happen on component mount then:

const tableRef = useRef<HTMLTableElement | null>(null)

useEffect(() => {
  tableRef?.current?.style.setProperty('--length': array.lenght);
}, [])
...

<table ref={tableRef}>
   <tbody>
      <tr>{array}</tr>
   </tbody>
</table>

This can also be used on any interaction and event

1
  • This will work but I don't think this is a good idea. If your CSS depends on the variable it may recalculate styles for no reason. It's better to render everything at once. Unless you use ref outside of React rendering.
    – jcubic
    Feb 15 at 11:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.