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 & {}>'.
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.
You can set the property name to be string, thus skipping this property when checked:
<main style={{ ["--nav-height" as string]: navHeight }}>
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}>
as operation does here and why it doesn't solve the issue
["--nav-height" as string] might be a somewhat more appropriate solution, you're passing a custom property in.
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>
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>
)
}
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");