Type 'string' is not assignable to type '"inherit" | "initial" | "unset" | "fixed" | "absolute" | "static" | "relative" | "sticky"' Type 'string' is not assignable to type '"inherit" | "initial" | "unset" | "fixed" | "absolute" | "static" | "relative" | "sticky"' typescript typescript

Type 'string' is not assignable to type '"inherit" | "initial" | "unset" | "fixed" | "absolute" | "static" | "relative" | "sticky"'


This is a workaround, but it is alright.Some other solution is:

const mystyles = {   position: 'absolute',} as React.CSSProperties;

You can check back when this issue will be solved. Around TS 2.6 i guess, judging by milestones.


Use the React.CSSProperties type:

import React, { CSSProperties } from "react";const myStyles: CSSProperties = {  position: 'absolute',}

Then just use the style as normal:

<div style={myStyles} />


The answer by superluminary doesn't work if you have nested style objects. In this case you can create a type:

import React, { CSSProperties } from 'react';export interface StylesDictionary{    [Key: string]: CSSProperties;}

And use it like so:

const styles:StylesDictionary  = {    someStyle:{        display:'flex',        justifyContent:'center',      },    someOtherStyle:{        display:'flex',        justifyContent:'center',        alignItems:'center',            }}

And then:

<div style={styles.someStyle} />