TypeScript error when using Augmented CSS in React v18

[user1990]

Description

In a Next.js project, we have the following minimal component:

import ReactSlider from "react-slider"

<ReactSlider
  renderThumb={(thumbProps) => <div {...thumbProps} />}
  renderTrack={(trackProps) => <span {...trackProps} />}
/>

We have augmented CSS variable type react.d.ts:

import 'react';

declare module 'react' {
  interface CSSProperties {
    [key: `--${string}`]: string | number | undefined;
  }
}

Error

Index signature for type '--${string}' is missing in type 'Properties<string | number, string & {}>'.ts(2322)

The issue may have arisen due to a mismatch in React versions, as the react-slider seems to have used React v17.0.2 as founded in the .lock file, while this issue was not present in React v17?

Environenment

Library	Version
React.js	18.2.0
Next.js	13.1.6
React-Slider	2.0.4
@types/react-slider	1.3.1

[bertPB]

Having the same issue here, did you manage to fix this?

Any update on this?

[user1990]

Having the same issue here, did you manage to fix this?

Any update on this?

No any updates/response, still having this issue. Currently using this workaround:

<div {...thumbProps} {...preventSwipingHandlers} style={{ ...thumbProps.style }} />