在 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 道具？

非常感谢！

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
  }
});