Using TypeScript, JSS with React throws `type is unassignable` for some css properties

Question

I'm new to TypeScript. I have a project created via create-react-app with TypeScript on board. Also I'm using JSS there. At some point I found out that some CSS properties throw an error.

For example, here are pointerEvents and position. Any time I use them, I get an error.

(42,28): Argument of type '{ placeholder: { pointerEvents: string; }; wrapper: { '& select': { position: string; }; }; }' is not assignable to parameter of type 'Record<"wrapper" | "placeholder", CSSProperties> | StyleCreator<"wrapper" | "placeholder", {}>'.
Type '{ placeholder: { pointerEvents: string; }; wrapper: { '& select': { position: string; }; }; }' is not assignable to type 'StyleCreator<"wrapper" | "placeholder", {}>'.
Type '{ placeholder: { pointerEvents: string; }; wrapper: { '& select': { position: string; }; }; }' provides no match for the signature '(theme: {}): Record<"wrapper" | "placeholder", CSSProperties>'.

Replacing pointerEvents with 'pointer-events' did the trick. But there's no way doing this with the position property.

So I actually have to either solve this issue or find a workaround.

If you have proper contextual typing in place, it shouldn't be necessary to annotate fields like 'absolute' as 'absolute'. If you'd be interested in my help to find a better solution, please add sufficient code to reproduce the original problem to the question. — Matt McCutchen
– Matt McCutchen, Commented Oct 15, 2018 at 5:53

RCKT · Accepted Answer · 2018-10-12 15:45:15Z

5

So, the easiest way I found is having the file containing styles to be a tsx file and assign properties like this:

classname: {
  position: 'absolute' as 'absolute',
}

answered Oct 12, 2018 at 15:45

RCKT

1713 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

justojas Over a year ago

This works for me. Can you explain why is there a need for this?

RCKT Over a year ago

I can't, because I'm not... so well informed on the TypeScript mechanics. My guess is that there's either some clash of types or on the contrary not all types are in place and TypeScript is not pleased.

Liron Navon · Accepted Answer · 2018-12-21 09:57:44Z

1

Seems like a very weird typing bug... But this will work like so: You can create a Position enum, and just use it.

export enum Position {
   absolute = 'absolute',
   fixed = 'fixed',
   relative = 'relative',
   unset = 'unset',
   static = 'static',
   sticky = 'sticky'
   //... more position options here ...
}

Then you can just use this enum:

classname: {
   position: Position.absolute,
}

answered Dec 21, 2018 at 9:57

Liron Navon

1,0871 gold badge12 silver badges22 bronze badges

Collectives™ on Stack Overflow

Using TypeScript, JSS with React throws `type is unassignable` for some css properties

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related