Jss: flexDirection is not assignable to CSSProperties

[reifnotreef]

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: https://github.com/frenic/csstype/issues/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

[reifnotreef]

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

[reifnotreef]

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)