如何將后綴圖標添加到 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>

這就是我現在所擁有的：

我想得到這樣的東西，在時間選擇器的右端有箭頭：

這是單擊“簽入”或“簽出”后的表格：

Answer 1

1.使用TimePicker props TextFieldComponent自定義TextField props（非組件）

• 參考： TimePicker props的material-ui- pickers文檔 API

2.使用TextField props InputProps自定義輸入組件，帶InputAdornment和普通endAdornment （后綴）

• 參考： material-ui TextField props 文檔 API

3.使用默認 styles 所必需的{...props}傳遞默認道具。

4.注意我們可以在嵌套箭頭 function 中將打開狀態作為參數傳遞。

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;