Trying to understand the purpose of the "slots" prop in relation to customizing how inner components like track and thumb are rendered within the Slider component.
A basic example of rendering a Slider component is shown below
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' }}
/>
);
Despite attempting this simple setup, I am encountering issues. The "slots" prop does not seem to have any effect (the expected change from spans to divs for root and thumb elements is not happening), it is just directly passed to the DOM
<span slots="[object Object]" class="MuiSlider...
What could be causing this issue?