How can I add custom scrollbar??

I would like to use react-scrollbar as follow:

<ScrollArea>
   menu.....
</ScrollArea>

but I can’t find any function that can do this, have any idea?

[Tomassito]

import Select from "react-select";
import Scrollbars from "react-custom-scrollbars";

const MyComponent = () => {
  const renderScrollbar = props => {
    return (
      <div style={{ height: 300 }}>
        <Scrollbars>{props.children}</Scrollbars>
      </div>
    );
  };
  
  return (
    <Select
       ....
       components={{ MenuList: renderScrollbar }}
    />
  );
}

something like this works for me.

@zzossig Can you share a codesanbox with this working? I copied this and didn’t work for me. Also, no need to wrap it in additional div just to get the height, as you can set autoHeight and autoHeightMax on Scrollbars. It only worked after adding prop captureMenuScroll={false}

[taiwanhua]

you can just use styled-component to rewrite css, like below :

import Select from 'react-select'
import styled from 'styled-components'

const SelectExtend = styled(Select).attrs((props) => ({}))`
    && {
        [class*="MenuList"] {
            //滾動條美化
            ::-webkit-scrollbar {
                width: 0.5em;
                height: ${props => props?.theme?.scrollHeight ?? 'initial'}; //scroll-x 的高度
            }
            ::-webkit-scrollbar-track {
                -webkit-border-radius: 10px;
                border-radius: 10px;
                margin:0px 0.1rem 5px 0;
            }
            ::-webkit-scrollbar-thumb {
                -webkit-border-radius: 4px;
                border-radius: 4px;
                background: ${props => props?.theme?.scrollUnhoverBackgroundColor ?? '#9093994d'};
            }
            &:hover::-webkit-scrollbar-thumb {
                -webkit-border-radius: 4px;
                border-radius: 4px;
                background: ${props => props?.theme?.scrollHoverBackgroundColor ?? '#9093994d'};
            }
        }
    }
`