Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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

I get the following error in my application (npm 5.4.2, react 15.4, typescript 2.5.3, webpack 2.2.1, webpack-dev-server 2.4.1).

This will work:

<div style={{position: 'absolute'}}>working</div>
This will not compile:
const mystyle = {
    position: 'absolute'            
<div style={mystyle}>not working</div>
The compile error is:
ERROR in ./src/components/Resource.tsx
(61,18): error TS2322: Type '{ style: { position: string; }; children: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Type '{ style: { position: string; }; children: string; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
    Types of property 'style' are incompatible.
      Type '{ position: string; }' is not assignable to type 'CSSProperties'.
        Types of property 'position' are incompatible.
          Type 'string' is not assignable to type '"inherit" | "initial" | "unset" | "fixed" | "absolute" | "static" | "relative" | "sticky"'.
webpack: Failed to compile.
But what't the difference? 
I can fix it with: 
const mystyle = {
    position: 'absolute' as 'absolute'            
but is this a good solution? 
I don't have this problem with other style/css properties.
I found a similar problem on github: 
https://github.com/Microsoft/TypeScript/issues/11465
but if understand it right, it was a typescript bug in an ealier version. 
Any help appreciated.
                Worked for me also for material-ui overrides: MuiSnackbarContent: {     root: {       flexWrap: "nowrap" as "nowrap",     },   },
– Gus
                Mar 12, 2019 at 16:21
                Thank you for your answer, but I get the same compile error. But your answer was helpful, so now I know I have to wait for TS 2.6...
– gfjr
                Oct 12, 2017 at 14:38
                My updated snip won't give you compile error. Though it still another form of the same workaround :-\
– Andy Theos
                Oct 12, 2017 at 14:46
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} />
You can make TypeScript infer literal values on the entire object by using a const assertion:
const mystyle = {
    position: 'absolute'            
} as const;
This way, if you add more properties to mystyle, it will work for them as well.
I had a similar issue trying to pass down a wrapperHeight string value (100px, 10vw, 100vh etc) to a HeroImage component. The solution was to actually use string literals around the value inside the CSS object (mouthful):
interface HeroImageProps {
  src: StaticImageData,
  alt: string,
  wrapperHeight: string,
export default function HeroImage({ src, alt, wrapperHeight }: HeroImageProps) {
  const wrapperStyles: React.CSSProperties = {
    height: `${wrapperHeight}`
  return (
    <div className={styles.heroImage} style={wrapperStyles} >
      <Image
        src={src}
        alt={alt}
        layout="fill"
        priority
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.