\"Slots\" 属性在 material-ui Slider 组件上应用时不执行任何操作

Question

我试图弄清楚在控制内部组件渲染（轨道、拇指等）方面必须为 Slider 组件提供什么“插槽”道具。

我正在渲染一个简单的 Slider 组件，如下所示

const marks = [
  { value: 0, label: '0' },
  { value: 10, label: '10' },
  { value: 20, label: '20' },
  { value: 30, label: '30' },
  { value: 40, label: '40' },
  { value: 50, label: '50' },
];

const SliderUsingSlots = () => (
  <Slider
    defaultValue={0}
    step={null}
    marks={marks}
    min={marks[0].value}
    max={marks[marks.length - 1].value}
    slots={{ root: 'div', thumb: 'div' }}
  />
);

然而，即使是这个简单的例子也不适合我。 “Slots”道具没有被以任何方式处理（根和拇指跨度没有被更改为div），它只是传递给DOM

<span slots="[object Object]" class="MuiSlider...

我究竟做错了什么？

Answer 1

我发现 Slider 的 slot 道具在 mui 5.9.3 中无法（完全）工作。尝试升级到 5.10.x。