CODEWITHSUNDEEP
reactjstypescript
Serio
Serio

Reputation: 527

How to set css variable using react

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 & {}>'.

Upvotes: 2

Views: 8247

Answers (4)

casraf
casraf

Reputation: 21684

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}>

Upvotes: 5

Mathias Bradiceanu
Mathias Bradiceanu

Reputation: 362

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");

Upvotes: -1

Mathias Bradiceanu
Mathias Bradiceanu

Reputation: 362

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>
    )
}

Upvotes: -1

Nabeel Ahmed
Nabeel Ahmed

Reputation: 154

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>

Upvotes: -1

Related Questions