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