Material UI垂直Slider：如何修改轨道（rail）的厚度？

我明白你遇到的困扰了——把Slider切换到垂直模式后，修改rail的height属性完全达不到调整轨道厚度的效果，但水平模式下却正常工作。这是因为Material UI在垂直模式下会对Slider的轨道做旋转变换，导致原本的宽高属性作用方向直接互换了。

问题根源 #

当你给Slider设置orientation="vertical"时，组件会自动给根元素加上MuiSlider-vertical类，同时通过CSS的transform把轨道旋转了90度。这时候你设置的height实际上控制的是轨道的长度，而真正决定轨道厚度的属性变成了width，这就是为什么修改height完全没效果的原因。

修复方案 #

我们可以通过针对垂直Slider的专属类名来精准覆盖样式，给垂直模式下的rail和track设置width来调整厚度，同时保留水平模式的height设置保证兼容性。修改你的PrettoSlider样式代码如下：

const PrettoSlider = withStyles({
  root: { 
    color: "#52af77",
    height: 8, // 水平模式下的轨道厚度
    '&.MuiSlider-vertical': {
      width: 8, // 垂直模式下的轨道厚度
      height: 'auto', // 垂直模式下高度自适应父容器
    }
  },
  thumb: {
    height: 24,
    width: 24,
    backgroundColor: "#fff",
    border: "4px solid currentColor",
    marginTop: -8,
    marginLeft: -12,
    "&:focus,&:hover,&$active": { boxShadow: "inherit" }
  },
  active: {},
  track: { 
    height: 8,
    borderRadius: 0,
    '&.MuiSlider-vertical': {
      width: 8,
      height: 'auto',
    }
  },
  rail: { 
    height: 8,
    borderRadius: 0,
    opacity: 1,
    '&.MuiSlider-vertical': {
      width: 8,
      height: 'auto',
    }
  }
})(Slider);

为什么这样有效？ #

• 通过&.MuiSlider-vertical嵌套选择器，我们只对垂直模式的Slider应用特定样式，不会影响水平模式的表现
• 垂直模式下把width设为想要的厚度值，height设为auto让轨道长度自适应父容器的高度
• 水平模式下保留原来的height设置，确保两种模式都能呈现你想要的轨道厚度效果

这样修改后，不管是水平还是垂直模式，Slider的轨道厚度都会按照你的预期生效了。

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