Take Component As Argument to Customization

[ozyman42]

In my case I'd like to use the StyledComponents library to create a custom track and thumb for the scrollbars, but it won't work because it seems this library requires base dom elements to be returned from the render functions.

I want to do this:

<Scrollbars
    renderTrackVertical={props => <VerticalTrack {...props} />}
    renderThumbVertical={props => <VerticalThum {...props} />}
>

or even better:

<Scrollbars verticalTrack={VerticalTrack} verticalThumb={VerticalThumb}>

but am forced to do this:

<Scrollbars
    renderTrackVertical={({style, ...props}) => <div {...props} style={{...style, ...vTrackStyle}}/>}
    renderThumbVertical={({style, ....props}) => <div {...props} style={{...style, ...vThumbStyle}} />}
>

The downside of being forced to use the second option is that I can't add styles for :hover or :active states, which would be easy to add if the render just took a component. I do not want to resort to a custom css class.

[hackhat]

why not `<Scrollbars renderTrackVertical={VerticalTrack} renderThumbVertical={VerticalThum}

`?

With const VerticalTrack = (props) => ....;