Используйте мой собственный ввод в Mui X DatePicker

Question

Я хочу, чтобы мои пользователи могли вводить свой день рождения, выбирая его из средства выбора даты или вводя значение вручную в поле ввода формы. Для этого я использую пакет mui-x-datepicker (версия 6.9.2). Но я не могу найти способ использовать свой собственный компонент TextField в качестве входных данных. Для старых сборщиков mui мы можем использовать свойство renderInput, но похоже, что новый сборщик mui-x не поддерживает renderInput. Может ли кто-нибудь помочь мне сделать это, используя свойство slots средства выбора даты.

Answer 1

Вы можете использоватьslotреквизит в средстве выбора даты.

Например:

      <DateTimePicker
  label="Controlled picker"
  value={value}
  onChange={(newValue) => setValue(newValue)}
  format="YYYY-MM-DD"
  views={["year", "month", "day"]}
  slots={{
    textField: (params) => <TextField variant='filled' {...params} />
  }}
/>

См.: https://codesandbox.io/s/cocky-rumple-yz8rtx?file=/demo.js .