Как добавить значок суффикса в поле ввода material-ui-pickers

Question

Это мой код:

<Box p={6}>
  <Grid container spacing={2}>
    <Grid item xs={6}>
      <TimePicker autoOk label={t('checkIn')} value={time1} onChange={handlecheckIn} clearable />
    </Grid>
    <Grid item xs={6}>
      <TimePicker autoOk label={t('checkOut')} value={time2} onChange={handleCheckOut} clearable />
    </Grid>

Это то, что у меня сейчас есть:

И я бы хотел получить что-то вроде этого, со стрелкой в ​​правом конце палитры времени:

И это форма после нажатия кнопки Check In или Check Out:

Answer 1

1.Используйте реквизиты TimePicker TextFieldComponent , чтобы настроить TextField реквизиты (не компоненты)

• см .: Material-ui-pickers документ из API реквизитов TimePicker

2. Используйте реквизиты TextField InputProps для настройки компонента ввода с InputAdornment и обычным endAdornment (суффикс)

• см .: material-ui документ API реквизитов TextField

3.Пропустить реквизиты по умолчанию с {...props}, что необходимо для стилей по умолчанию.

4. Обратите внимание, что мы можем передать статус открытия в виде параметров в функции вложенной стрелки.

import React, { useState } from "react";
import DateFnsUtils from "@date-io/date-fns"; // choose your lib
import { TimePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";
import { TextField, InputAdornment } from "@material-ui/core";
import ExpandLess from "@material-ui/icons/ExpandLess";
import ExpandMore from "@material-ui/icons/ExpandMore";

const CustomizedTextField = open => props => {
  return (
    <TextField
      id="standard-basic"
      label="Standard"
      {...props}
      InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            {open ? <ExpandMore /> : <ExpandLess />}
          </InputAdornment>
        )
      }}
    />
  );
};

function App() {
  const [selectedDate, handleDateChange] = useState(new Date());
  const [open, setOpen] = React.useState(false);
  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <TimePicker
        value={selectedDate}
        onChange={handleDateChange}
        open={open}
        onOpen={() => setOpen(true)}
        onClose={() => setOpen(false)}
        TextFieldComponent={CustomizedTextField(open)}
      />
    </MuiPickersUtilsProvider>
  );
}

export default App;