[BUG] 'Scrollbars' cannot be used as a JSX component.

[diegonunes4]

Hello I'm creating a component that uses the Scrollbars and adds the style, this is used after like the normal component is, it's only a way to not repeat code.

This is the code:

import React from 'react';
import { Scrollbars } from 'rc-scrollbars';

const renderThumb = ({ style, ...props }: { style: any }) => {
    const thumbStyle = {
        borderRadius: 6,
        backgroundColor: 'gray',
    };
    return <div style={{ ...style, ...thumbStyle }} {...props} />;
};

function CustomScrollbar(props: any) {
    return <Scrollbars /* renderThumbHorizontal={renderThumb} */ renderThumbVertical={renderThumb} children={false} {...props}  />;
}

export default CustomScrollbar;

Any idea?

[akavato]

Why you are importing from rc-scrollbars, this repo is about react-custom-scrollbars-2)

[antonio-ivanovski]

Same issue

[smartgru]

@ToTeTo
I've add below "resolutions" in package.json and it resolved the above issue.

"resolutions": {
    "@types/react": "17.0.40",
    "@types/react-dom": "17.0.13"
  },

[woowalker]

any ideas without resolutions ?