在做一个主题换肤的需求时，需要根据用户选择的主题，适配页面元素的配色。
这里就涉及到对浏览器默认滚动条样式的编辑。
查阅了文档发现，目前webkit支持拥有overflow属性的区域，列表框、下拉菜单、textarea的滚动条自定义样式，所以用处还是很大的。
滚动条组成部分
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track 滚动条的轨道（里面装有thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分了解了滚动条各个属性后，就可以开始设置样式，代码如下。
因为需求只需要符合主题配色，所以这次我们只设置滚动条背景::-webkit-scrollbar,滚动条轨道::-webkit-scrollbar和小滑块::-webkit-scrollbar-track的样式::-webkit-scrollbar-thumb即可，如下：
.ant-calendar-time-picker-select {
border-right: 1px solid var(--timerRangeBorderColor);
overflow-y: scroll;
/*定义滚动条高宽及背景
高宽分别对应横竖滚动条的尺寸*/
&::-webkit-scrollbar {
background-color: #333333;
}
/*定义滚动条轨道
内阴影+圆角*/
&::-webkit-scrollbar-track {
-webkit-box-shadow:inset 0 0 6px #333333;
border-radius:10px;
background-color: #9C9C9C;
}
/*定义滑块
内阴影+圆角*/
&::-webkit-scrollbar-thumb {
border-radius:10px;
-webkit-box-shadow:inset 0 0 6px #9C9C9C;
background-color: #9C9C9C;
}
.ant-calendar-time-picker-select-option-selected {
color: #FFFFFF;
background-color: #9C9C9C;
}
}效果如下，如果需要设置其他的样式，也可根据具体需求调整。
