Reactjs antd选择带有渐变的手柄自定义形状

我正在尝试修改

antd

滑块的默认句柄（拇指）。我的最终目标是使它成为一个具有线性梯度的更圆的六边形。
因为我还没有找到用自定义SVG替换句柄的方法，所以我修改了由
antd
library公开的类，使句柄为六边形。在我应用梯度之前，它看起来还不错，问题是六边形实际上是3个独立的圆形矩形，梯度分别应用于每个矩形

这是我的密码

const CustomSlider = styled(Slider)<{ trackColor: string; startColor: string; stopColor: string }>`
  z-index: 100;
  &&&& {
    .ant-slider-handle {
      display: inline-block;
      position: absolute;
      height: 20px;
      width: 32px;
      margin-top: -8px;
      border-radius: 3px;
      ${({ startColor, stopColor }) =>
        `background: linear-gradient(to bottom, ${startColor}, ${stopColor})`};
      transition: opacity 0.5s;
      border: none;
    }
    .ant-slider-handle:before,
    .ant-slider-handle:after {
      position: absolute;
      width: inherit;
      height: inherit;
      border-radius: inherit;
      background: inherit;
      content: '';
    }
    .ant-slider-handle:before {
      transform: rotate(60deg);
      ${({ startColor, stopColor }) => {
        return `background: linear-gradient(to bottom, ${startColor}, ${stopColor})`
      }}
    }
    .ant-slider-handle:after {
      transform: rotate(-60deg);
      ${({ startColor, stopColor }) => {
        return `background: linear-gradient(to bottom, ${startColor}, ${stopColor})`
      }}
    }
    .ant-slider-handle:focus {
      box-shadow: none;
    }

    .ant-slider-track {
      background-color: ${({ trackColor }) => trackColor};
    }
  }
`

const CustomSlider=styled（Slider）`
z指数：100；
&&&& {
.蚂蚁滑柄{
显示：内联块；
位置：绝对位置；
高度：20px；
宽度：32px；
利润上限：-8px；
边界半径：3px；
${（{startColor，stopColor}）=>
`背景：线性渐变（到底部，${startColor}，${stopColor}）`}；
过渡：不透明度0.5s；
边界：无；
}
.ant滑块手柄：之前，
.ant滑块手柄：在{
位置：绝对位置；
宽度：继承；
身高：继承；
边界半径：继承；
背景：继承；
内容：''；
}
.ant滑块手柄：在{
变换：旋转（60度）；
${（{startColor，stopColor}）=>{
return`background:linear gradient（到底部，${startColor}，${stopColor}）`
}}
}
.ant滑块手柄：在{
变换：旋转（-60度）；
${（{startColor，stopColor}）=>{
return`background:linear gradient（到底部，${startColor}，${stopColor}）`
}}
}
.ant滑块手柄：焦点{
盒影：无；
}
.蚂蚁滑轨{
背景色：${（{trackColor}）=>trackColor}；
}
}
`


有没有办法让它看起来像一个连续的部分