MUI Slider自定义标记优化：首尾标记边距调整方案咨询

我在使用MUI Slider的标记（marks）功能时，希望给首尾两个白色圆点标记添加8px的内边距/外边距。目前通过以下代码实现了需求，但觉得写法繁琐，想找更优的实现方式：

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

几种优化方案： #

1. 简化CSS选择器写法

合并首尾标记的选择器，用calc精准控制位置，尽量减少!important的使用（若样式优先级足够）：

[`& .${sliderClasses.mark}:first-of-type`]: {
  left: '8px',
  transform: 'translateX(-50%)', // 修正默认居中偏移
},
[`& .${sliderClasses.mark}:last-of-type`]: {
  left: 'calc(100% - 8px)',
  transform: 'translateX(-50%)',
},

如果默认样式优先级更高，可给Slider组件添加自定义类名提升样式权重，避免!important。

2. 自定义标记类名

直接在marks配置中给首尾标记指定自定义类，再单独写样式，这种方式不依赖DOM结构，更易维护：

// 定义marks时添加自定义类
const marks = [
  { value: 0, label: '0', className: 'first-mark' },
  { value: 50, label: '50' },
  { value: 100, label: '100', className: 'last-mark' },
];

// 样式部分
'.first-mark': {
  marginLeft: '8px',
},
'.last-mark': {
  marginRight: '8px',
},

3. 调整轨道内边距

如果标记位置跟随轨道，可给Slider的轨道和滑轨添加内边距，让标记自然向内偏移：

[`& .${sliderClasses.track}, & .${sliderClasses.rail}`]: {
  padding: '0 8px',
},

注意这种方式会缩短轨道的视觉长度，需结合UI需求调整。

内容的提问来源于stack exchange，提问作者Jakub Koudela