如何实现Ant design 菜单的滚动条效果？

Question

如上图所示，是一个Ant design下拉菜单的样式：有一个列表，包含若干条数据，当不滚动的时候滚动条隐藏，当滚动鼠标的时候滚动条显示，停止滚动后消失。

当前我自己的滚动列表是这个亚子，滚动条丑丑的

demo代码如下，使用::-webkit-scrollbar ::-webkit-scrollbar-track
::-webkit-scrollbar-thumb设置滚动条样式好像没效果，还是我写得有问题？

综上，请问这个需求该怎么实现呢？只实现样式的改变也行！！！
o(╥﹏╥)o

index.ts

import { Card, List} from "antd";
import styles from './styles.less';

const demo:React.FC=()=>{

    const data = [
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
      ];

    return (
        <div>
                <Card title='选择列表' className={styles.card} bordered={false}>
                        <List
                            size="small"
                            bordered
                            dataSource={data}
                            renderItem={(item:any) => <List.Item>{item}</List.Item>}
                            className={styles.List}
                        />
                </Card> 
        </div>

    )
}
export default demo

styles.less

.card{
    border-radius: 5px;
    :global{
        .ant-card{
            border-radius: 5px;
        }
        
        .ant-card-head{
            padding: 24px;
            border: none;
            border-radius: 5px;
            height:90px;
            min-height: 90px;
        }

        .ant-card-head-wrapper{
            margin-top: 10px;
        }

        .ant-card-head-title{
            padding:0px;
            color: #1890ff;
            border-radius: 5px;
            font-size: 18px;
        }

      .ant-card-body{
            padding: 0px;
            border-radius: 0px 0px 5px 5px;
            height:473px;
            border-top: 1px solid #f0f0f0;
            overflow-y: scroll;

        }
        
        //设置滚动条样式
        .ant-card-body ::-webkit-scrollbar{
            width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }

        .ant-card-body ::-webkit-scrollbar-track{
            box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            background   : #e40d0d;
        }

        .ant-card-body ::-webkit-scrollbar-thumb{
            width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }
}

.List{
    border: none ;
    :global{
        .ant-list-item{
            font-size: 18px;
        }

        .ant-list-item:hover{
            background-color: #1890ff;
            border-radius: 0px;
            cursor: pointer;
        }

        .ant-list-split,.ant-list-item{
            border:none
        }
    }

}

Answer 1

看看这个库
https://github.com/mdbootstra...