Material-UI 的 Slider 滑块怎么自定义轨道颜色？

南宫俊宇提问于 2026-03-20 13:34:18 阅读 5

组件

我用 Material-UI 的 Slider 组件，想改一下轨道的颜色，但试了官网给的 sx 属性和 styled 方法都不太生效，是不是我写法有问题？

比如我这样写了 CSS：

.MuiSlider-track {
  color: #1976d2 !important;
}
.MuiSlider-rail {
  color: #e0e0e0 !important;
}

但实际渲染出来还是默认的灰色轨道，根本没变。是不是类名不对？还是得用别的方法覆盖？

Slider滑块

我来解答赞 1 收藏

反馈

1 条解答

公孙诗雅 Lv1

按照规范，Material-UI 的 Slider 组件的轨道颜色可以通过 sx 属性或者 styled 方法来自定义。你提到的方法没有生效，可能是由于样式优先级的问题或者选择器不正确。

首先，确保你使用的是正确的类名。对于轨道，应该使用 MuiSlider-track；而对于滑动条的底座（rail），则使用 MuiSlider-rail。不过，直接在 CSS 中通过 color 属性设置颜色可能不会生效，因为轨道颜色通常是通过背景色（background-color）来控制的。

你可以尝试以下方法来设置轨道颜色：

使用 sx 属性：

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




  sx={{

    '& .MuiSlider-track': {

      backgroundColor: '#1976d2',

    },

    '& .MuiSlider-rail': {

      backgroundColor: '#e0e0e0',

    },

  }}

/>

或者使用 styled 方法：

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

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



const CustomSlider = styled(Slider)({

  '& .MuiSlider-track': {

    backgroundColor: '#1976d2',

  },

  '& .MuiSlider-rail': {

    backgroundColor: '#e0e0e0',

  },

});

这两种方法都应该能正确地覆盖默认样式并设置轨道颜色。确保你的 CSS 或者 sx 样式在组件之后加载，或者使用更高优先级的选择器来覆盖默认样式。

2026-03-20 15:15