ReactJS/MaterialUI 中的三角形按钮滑块

如何解决ReactJS/MaterialUI 中的三角形按钮滑块

我正在努力在 Material UI 和 ReactJS 的滑块上制作一个完美的三角形按钮而不是披萨片按钮，这就是我想要完成的任务：

这就是我目前所在的位置：

//应用程序

const CustumSlider = withStyles({
    root: {
        color: "transparent",height: 2,padding: '15px 0',},thumb: {
        BoxShadow: iOSBoxShadow,marginLeft: -16,width: 0,height: 0,borderLeft: "16px solid transparent",borderRight: "16px solid transparent",borderBottom: "16px solid #f39200",cursor: "pointer",marginTop: "9px",'&:focus,&:hover,&$active': {
            color: "transparent",BoxShadow: iOSBoxShadow,'@media (hover: none)': {
                BoxShadow: iOSBoxShadow,valueLabel: {
        left: '-16px',top: -25,fontSize: 16,fontFamily: "Nunito",fontWeight: 700,'& *': {
            background: 'transparent',color: '#f39200',track: {
        height: 15,borderTopLefTradius: "5px",borderBottomLefTradius: "5px",color: "#003865",rail: {
        height: 15,opacity: 0.5,borderTopRighTradius: "5px",borderBottomrighTradius: "5px",backgroundColor: "rgba(0,0.4)",mark: {
        backgroundColor: '#bfbfbf',height: 8,width: 1,marginTop: -3,markActive: {
        opacity: 1,backgroundColor: 'currentColor',})(Slider);

有没有办法解决在滑块中出现三角形按钮的问题？

解决方法

只需添加

borderRadius: "0px",

到 thumb 样式 sandbox