如何禁用MUI Slider组件的滑块追踪动画？

有两种简单方式可以让MUI Slider的滑块（thumb）瞬间移动、禁用过渡动画：

• 自定义样式组件覆盖
  通过styled工具创建去除动画的Slider组件，后续直接复用该组件即可：

import Slider from '@mui/material/Slider';
import { styled } from '@mui/material/styles';

const NoAnimationSlider = styled(Slider)`
  .MuiSlider-thumb {
    transition: none !important;
  }
`;

// 使用示例
export default function YourComponent() {
  return <NoAnimationSlider defaultValue={50} />;
}

• 内联sx属性修改
  如果不需要复用组件，直接在原Slider上通过sx属性覆盖默认样式：

import Slider from '@mui/material/Slider';

export default function YourComponent() {
  return (
    <Slider
      defaultValue={50}
      sx={{
        '& .MuiSlider-thumb': {
          transition: 'none !important',
        },
      }}
    />
  );
}

原理说明：MUI Slider的滑块默认通过transition属性实现平滑移动动画，移除该属性后，滑块位置变化时就会瞬间跳转。

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