How to set css variable using react

Question

how to set css variable in react typescript if I'm trying to

 <main style={{ "--nav-height": navHeight }}>
 </main>
main {
 height: calc(100vh -var(--nav-height));
 background: green;
}

I'm getting

Type '{ "--nav-height": string; }' is not assignable to type 'Properties<string | number, string & {}>'.

Answer 1

In TypeScript, React's style property types are mapped to actual CSS properties (minHeight => min-height, etc).

Since you are entering an unknown property, it fails the type check.

What you can do is assert the type yourself so this doesn't happen anymore.

Method 1 (recommended)

You can set the property name to be string, thus skipping this property when checked:

<main style={{ ["--nav-height" as string]: navHeight }}>

Method 2 (not recommended)

You can cast the entire object so it always fits (not recommended - this might cause problems with other properties' types as they might stop working and auto completing for you)

<main style={{ "--nav-height": navHeight } as React.CSSProperties}>

• ipikuka: Both methods produce eslint error. Method-1 @typescript-eslint/no-explicit-any; Method-2 @typescript-eslint/consistent-type-assertions
• Matej Kormuth: You can read what as operation does here and why it doesn't solve the issue
• Mark: ["--nav-height" as string] might be a somewhat more appropriate solution, you're passing a custom property in.
• casraf: Updated the answer

Answer 2

The error seems to indicate that you are using an invalid property for the style prop. Perhaps you are confusing --nav-height with height.

You can try the following:

<main style={{ height: "var(--nav-height)" }}></main>

Answer 3

You're problem is not related to Typescript. You have this error because when you declare a style props, TS is waiting for valid properties like color, backgroundColor, etc... which your --nav-height is not.

To set the value of a CSS variable using JavaScript (and so, React, since it's just Javacsript), you use setProperty on documentElement's style property:

You have to do somehting like this :

 const createVariable = () => {
 document.documentElement.style.setProperty('--my-color', 'pink');
 }
 return (
 <React.Fragment>
 <h1 onClick={createVariable}>Click me to set the variable!</h1>
 <p style={{color: "var(--my-color)"}}>Look at me !</p>
 </React.Fragment>
 )
}

Answer 4

To set or to use a CSS variable into a JS context you could use a dedicated util function.

The util function to set it :

export const jsAsCSS = (name: string, value: string) => {
 document.documentElement.style.setProperty(name, value);
}

The usage of the setter :

 const HelloWorld = () => {
 
 const setCSSVariable = () => {
 Utils.jsAsCSS("--my-color", "red");
 };
 return (
 <div>
 <button onClick={setCSSVariable}>Click me</button>
 </div>
 );
};

---

The util function to use it :

export const cssAsJS = (name: string) =>
 getComputedStyle(document.documentElement).getPropertyValue(name);

The usage of the user :

const myColor = cssAsJS("--color-red");