Sometimes, we want to fix the ‘Type ‘string’ is not assignable to type ‘”inherit” | “initial” | “unset” | “fixed” | “absolute” | “static” | “relative” | “sticky”” with React and TypeScript.

In this article, we’ll look at how to fix the ‘Type ‘string’ is not assignable to type ‘”inherit” | “initial” | “unset” | “fixed” | “absolute” | “static” | “relative” | “sticky”” with React and TypeScript.

How to fix the ‘Type ‘string’ is not assignable to type ‘”inherit” | “initial” | “unset” | “fixed” | “absolute” | “static” | “relative” | “sticky”” with React and TypeScript?

To fix the ‘Type ‘string’ is not assignable to type ‘”inherit” | “initial” | “unset” | “fixed” | “absolute” | “static” | “relative” | “sticky”” with React and TypeScript, we can cast the style object to type React.CSSProperties.

For instance, we write

const myStyles = {
  position: "absolute",
} as React.CSSProperties;

in our component so that the TypeScript compiler knows that the myStyles object is of type React.CSSProperties, which allows the position property to have value 'absolute'.

Conclusion

To fix the ‘Type ‘string’ is not assignable to type ‘”inherit” | “initial” | “unset” | “fixed” | “absolute” | “static” | “relative” | “sticky”” with React and TypeScript, we can cast the style object to type React.CSSProperties.