[v9.0.0-rc.3] TypeScript types not compatible with latest @types/react (16.9.44)

[bengry]

🐛 Bug Report

A new version of @types/react recently came out which depends on csstype@3.0.2, which in turn has better type definitions for CSS properties.
The latest react-spring@v9.0.0-rc.3 is incompatible with these types when trying to use the style prop on animated components, throwing this example error (I used the opacity property, but the same holds true for most other properties):

  Types of property 'opacity' are incompatible.
    Type 'SpringValue<number>' is not assignable to type '"initial" | "inherit" | "-moz-initial" | "revert" | "unset" | FluidValue<Globals, any> | undefined'.
      Type 'SpringValue<number>' is not assignable to type 'FluidValue<Globals, any>'.
        The types returned by 'get()' are incompatible between these types.
          Type 'number' is not assignable to type 'Globals'.ts(2322)

To Reproduce

Try to use the useTransition hook with it's returned callback, and render an <animated.div /> with the styles given by the callback (see repro link).

Expected behavior

There should not be a compile-time error for the style prop.

Link to repro (highly encouraged)

https://codesandbox.io/s/elegant-mclaren-39xuy?file=/src/App.tsx

Environment

• react-spring v9.0.0-rc.3
• react v16.13.1

[tbntdima]

Experiencing the same, what can be a temporary workaround until it's fixed?

[henrycity]

useSpring has the same error for me.

[iam4x]

@tbntdima

• you stick with @types/react ^16.9.43
• or you cast any to opacity in your components opacity: animationProps.opacity as any,

[mechanicMo]

having this issue as well. @iam4x can you (or anyone else) go into more detail on the work around please?

I see that a fix was released, but even though I'm on the latest version of react-spring I'm still having this issue

these are the bits of code I think are relevant

type AccordionContextValue = { accordionStyles: { maxHeight: SpringValue<string>; opacity: SpringValue<number>; transform: SpringValue<string>; }; clickHandler: () => void; titleRef: React.MutableRefObject<null>; };

const [accordionStyles, setAccordionStyles] = useSpring(() => ({ maxHeight: '0vh', opacity: 0, transform: 'scale(0)', }));

setAccordionStyles({ maxHeight: open ? '100vh' : '0vh', opacity: open ? 1 : 0, transform: open ? 'scale(1)' : 'scale(0)', });

<a.div style={accordionStyles} {...props}> {children} </a.div>