在 Slider Material-UI 上自定义样式（React）

Question

我正在尝试使用 Material UI 和 React 制作一个具有限制值 的 滑块。我已经从文档页面复制了基本实现，它似乎不需要 CSS 来运行。但是当我在我的项目中使用它时，标签显示为代表所选值的线的颜色重叠（0 值，该线是浅蓝色，5 值，所有线都是深蓝色）。

这是我实现的代码：

const useStyles = makeStyles({


root: {
    width: 300,
  },
  
});

const marks = [
  {
    value: 1,
    label: 'Nada',
  },
  {
    value: 2,
    label: 'Un poco',
  },
  {
    value: 3,
    label: 'Moderado',
  },
  {
    value: 4,
    label: 'Bastante',
  },
  {
      value: 5,
      label: 'Totalmente'
  }
];

function valuetext(value) {
  return `${value}`;
}

function valueLabelFormat(value) {
  return marks.findIndex((mark) => mark.value === value) + 1;
}

export default function DiscreteSlider() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Typography id="discrete-slider-restrict" gutterBottom>
        Restricted values
      </Typography>
      <Slider
        defaultValue={0}
        valueLabelFormat={valueLabelFormat}
        getAriaValueText={valuetext}
        aria-labelledby="discrete-slider-restrict"
        step={null}
        valueLabelDisplay="auto"
        marks={marks}
      />
    </div>
  );
}

Slider 看起来像这样：

如何更改重叠并使其正常工作？有没有我可以使用的 Slider 道具？

非常感谢！

Answer 1

将 Slider 的 max 设置为 5 - 当前它默认为 100（请参阅 docs 了解默认值）。目前，您的标记值是 1 到 5，因此它们被挤压在那个小区域

<Slider
  max={5}  // <-- set max
  defaultValue={0}
  valueLabelFormat={valueLabelFormat}
  getAriaValueText={valuetext}
  aria-labelledby="discrete-slider-restrict"
  step={null}
  valueLabelDisplay="auto"
  marks={marks}
/>

并分配更多 width 来容纳标签

const useStyles = makeStyles({
  root: {
    width: 600
  }
});