flexDirection is not assignable to CSSProperties
See original GitHub issueflexDirection: 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.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:84
- Comments:11
Top Results From Across the Web
TypeScript saying a string is invalid even though it's in the ...
Type '{ flexDirection: string; }' is not assignable to type 'CSSProperties'. Types of property 'flexDirection' are incompatible. Type 'string' ...
Read more >flexDirection is not assignable to CSSProperties -
flexDirection : string; is not assignable to type 'CSSProperties'. React using TypeScript.
Read more >flex-direction - CSS: Cascading Style Sheets - MDN Web Docs
The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or ......
Read more >TypeScript - Material-UI
... flexDirection: 'column', } }; withStyles(styles); // ^^^^^^ // Types of property 'flexDirection' are incompatible. // Type 'string' is not assignable to ...
Read more >CSSProperties - typescript
The non-standard -moz-float-edge CSS property specifies whether the height ... The flex-direction CSS property sets how flex items are placed in the flex ......
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
as React.CSSProperties works for me
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