flexDirection is not assignable to CSSProperties

[just-Bri]

flexDirection: string; is not assignable to type 'CSSProperties'

React using TypeScript.

(JSX attribute) HTMLAttributes<HTMLDivElement>.style?: React.CSSProperties
Type '{ backgroundColor: string; display: string; flex: string; flexDirection: string; }' is not assignable to type 'CSSProperties'.
  Types of property 'flexDirection' are incompatible.
    Type 'string' is not assignable to type 'FlexDirectionProperty'.ts(2322)
index.d.ts(1763, 9): The expected type comes from property 'style' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

Get this error when trying to assign a flexDirection in styles:

const styles = {
  root: {
    backgroundColor: 'red',
    display: 'flex',
    flex: 'row',
    flexDirection: 'row',
  },
};

This really confuses me:

Types of property 'flexDirection' are incompatible.
            Type 'string' is not assignable to type '"row" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row-reverse" | PropsFunc<{}, FlexDirectionProperty>'.ts(2345)

It doesn't know that the string 'row' is === "row"

single quotes are being put in place via eslint/prettier, even when I try using double quotes it doesn't change it. I have also tried nested flex properties in an object:

flex : {
  direction: 'row',
}

and

flex: {
  flexDirection: 'row',
},

But neither of those work.

EDIT:

I found a workaround:

flexDirection: 'row' as 'row',

This allows it to work as expected but is super clunky.

[holylander]

Thanks @reifnotreef ! your workaround worked for me 👍

[abustamam]

This appears to be an issue with the CSSType library, I think. Notice here that JustifyContent has the (string & {}) at the end: https://github.com/frenic/csstype/blob/master/index.d.ts#L18504

But it's missing from FlexDirection: https://github.com/frenic/csstype/blob/master/index.d.ts#L18324

There's been some discussion about it: frenic/csstype#84, but nothing directly relating to this particular issue.

Also, you can use const assertions as of TS 3.4: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html, so it becomes 'row' as const.

[gituser3000]

whiteSpace: 'nowrap'
same error

[just-Bri]

Wanted to drop a note on here that this does not happen using react-jss and createUseStyles.
Obviously something is bit wonky with the types but I'm not sure what the fix would be.

[dannyfoncke]

as React.CSSProperties works for me

let labelPosition  = {
        display: "flex",
        flexDirection: "row",
    }

<div style={labelPosition as React.CSSProperties}>

[just-Bri]

as React.CSSProperties works for me

let labelPosition  = {
        display: "flex",
        flexDirection: "row",
    }

<div style={labelPosition as React.CSSProperties}>

You are just using a style tag and a JS object, this has no direct interaction with JSS.
For reference you can do this in a jsx file without having jss installed at all: https://repl.it/join/ddppwbhd-reifnotreef

[dannyfoncke]

@reifnotreef Sorry, I reacted to the question not realizing it was specific to JSS
I had the same problem (not using JSS) in typescript and didn't look any further
If you prefer I can delete my first (and this) post as it is not relevant (and not to clutter this space)

[stanislavn73]

Seems this problem appearing when using withStyles. When using makeStyle problem is gone

[ialsowalkdogs]

This is a TS issue and it happens because in the absence of typing, your flexDirection is cast as string and it cannot be coerced into the string literal matching FlexDirectionProperty.

Does it work if you provide an explicit type for your styles, like:

type Styles = { 
  root: {
    flexDirection: FlexDirectionProperty;
  ...
  }
}

[olejorgenb]

Seems this problem appearing when using withStyles. When using makeStyle problem is gone

Hm.. but I get the problem when using the createStyles as input to makeStyles.

A bit of a side track, but I was under the impression that one had to use the createStyles wrapper, but that doesn't seem to be the case. Webstorm also provides better support for object literal passed directly to makeStyles

PS: I get the same problem for the boxSizing, alignItems and whiteSpace properties.

[Faruk-Suljagic]

This fixed my problem

[enBonnet]

Same problem

[juburr]

You can also declare the object type immediately versus trying to cast it later on. This is a variation of one of the top answers from above.

let labelPosition: React.CSSProperties  = {
    display: "flex",
    flexDirection: "row",
}

<div style={labelPosition}>