这是一个好主意。然而，由于Popper.js(我们Popper组件背后的库)不再维护，我更愿意使用我们目前正在开发的新Popup组件( #37960 )。尽管如此，最终结果应该大致相同。

同时，在没有简单解决方案的情况下，也遇到了很多解决这个问题的困难。

同时，在尝试解决这个问题时遇到了很多困难，没有简单的解决方案可用。
目前已经解决了容器左侧/右侧标签被切断的问题，通过以下自定义CSS实现(之所以有效，是因为我的标签宽度对于所有值都是一致的)。

<Slider
    size='small'
    color='secondary'
    marks={dateMarks}
    min={minDateValue}
    max={maxDateValue}
    step={60 * 60 * 24}
    valueLabelDisplay={'auto'}
    valueLabelFormat={(value) => moment.unix(value).format('DD/MM/YYYY')}
    value={dateValue}
    onChange={(e, value) => {updateDateValue(value)}}
    sx={{
        marginLeft: 1,
        marginRight: 1,
        width: 'calc(100% - 16px)',
        '& .MuiSlider-markLabel': {
            color: 'primary.contrastText',
            fontSize: '0.75rem'
        },
        '&.MuiSlider-root .MuiSlider-thumb[data-index="0"] .MuiSlider-valueLabel': {
            marginLeft: '66px',
            '&::before': {
                left: '12px'
            }
        },
        '&.MuiSlider-root .MuiSlider-thumb[data-index="1"] .MuiSlider-valueLabel': {
            marginRight: '66px',
            '&::before': {
                left: 'calc(100% - 12px)'
            }
        }
    }}
/>

这导致了以下结果：
之前：

之后：

这对任何遇到这个问题的人来说可能都很有用。