如何在我的 TimePicker 组件中删除 MuiClockPicker-arrowSwitcher

Question

我在删除 TimePicker 组件中的“<”和“>”时遇到问题。这是我的代码示例：

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <TimePicker
    {...field}
    openTo="hours"
    views={['hours']}
    inputFormat="HH:00"
    mask="__:__"
    value={closeTimeValue}
    onChange={(newValue) => handleCloseTimeChange(newValue)}
    components={{
      OpenPickerIcon: AccessTimeFilledIcon,
    }}
    InputAdornmentProps={{ position: 'start', variant: 'standard' }}
    renderInput={(params) => <TextField {...params} sx={{ width: '120px' }} />}
  />
</LocalizationProvider>

我尝试在 createTheme

处使用覆盖

        MuiClockPicker: {
            styleOverrides: {
                arrowSwitcher: {
                    display: 'none',
                },
            },
        },

但是它给我一个错误

TS2322: Type '{ MuiCheckbox: { styleOverrides: { colorPrimary: { color: string; }; }; }; MuiOutlinedInput: { styleOverrides: { root: { color: string; border: string; }; }; }; MuiInputLabel: { styleOverrides: { root: { color: string; backgroundColor: string; paddingRight: string; paddingLeft: string; }; }; }; ... 4 more ...; MuiCl...' is not assignable to type 'Components'. Object literal may only specify known properties, and 'MuiClockPicker' does not exist in type 'Components'.

这是我要删除的 arrowSwitcher 的图片

Answer 1

此代码应按预期工作：

<TimePicker
    {...field}
    openTo="hours"
    views={['hours']}
    inputFormat="HH:00"
    mask="__:__"
    value={closeTimeValue}
    onChange={(newValue) => handleCloseTimeChange(newValue)}
    components={{
      LeftArrowButton: Boolean,
      RightArrowButton: Boolean,
      OpenPickerIcon: AccessTimeFilledIcon,
    }}
    InputAdornmentProps={{ position: 'start', variant: 'standard' }}
    renderInput={(params) => <TextField {...params} sx={{ width: '120px' }} />}
  />

如何在我的 TimePicker 组件中删除 MuiClockPicker-arrowSwitcher

How can I remove MuiClockPicker-arrowSwitcher at my TimePicker component

reactjs

material-ui