Mui 滑块 - 自定义标记

Question

大家好，

我在 Mui Slider 及其标记中遇到过这个问题。如果您查看屏幕截图，我想向第一个标记（白点）添加一些填充/边距（即 8px），最后一个标记也相同。

此刻我有这个：

[`& :nth-child(1 of .${sliderClasses.mark})`]: {
   left: '2% !important',
},
[`& .${sliderClasses.mark}:nth-last-child(1 of .${sliderClasses.mark})`]: {
   left: '98% !important',
},

这可行，但看起来有点麻烦，而且肯定可以做得更好。 任何想法或指向正确方向的想法将不胜感激;-)

Answer 1

如何添加滑块的长度，使点的位置相同，但两侧都会有一些填充。 示例：

.css-3ndvyc {
    width: calc(100% + 16px);
    left: -8px;
}
.MuiSlider-track.css-10opxo5 {
    left: -8px !important;
}

-- 注意：抱歉我无法发表评论，因为我的观点太低了，我通过在 https://mui.com/material-ui/react-slider/

上编辑滑块 css 来尝试此方法