How to style react-popper using render props in class components

Question

Just updated to react-popper 2.3.0 and @popperjs/core: "2.11.6 Tring to set the style as desribed on it's own doc, but writing: <Popper children={({style:{color:'red'}}) => <div>opened</div>} strategy="fixed" /> returns the error Property 'red' does not exist on type 'CSSProperties'

Answer 1

You can use a string literal type to specify the property value, like this:

<Popper children={({style:{color:'red' as 'red'}}) => <div>opened</div>} strategy="fixed" />

This will tell TypeScript that the value of "color" is the string literal "red", which is a valid CSS color value.