我正在嘗試將Material-UI InfoIcon添加到我的代碼中。 但我不知道如何在TextField中實現它

Question

我正在嘗試將Material-UI InfoIcon - >添加到我的代碼中。 但我不知道如何在TextField中實現它。

這是材料-UI代碼：

      <InfoIcon fontSize="small" />

這是我想要的地方：

   <Grid item xs={5}>
        <TextField
          id="createdate"
          label="Create Date"
          value={dateCheck(workOrderDetail.reported_date, 'll') } 
          variant="filled"
          disabled
          fullWidth
          inputProps={{ style: style.textFieldInput }}
        />
      </Grid>

Answer 1

您應該將您的圖標與InputAdornment組件放在一起。 我為您創建了一個快速演示：

import InputAdornment from '@material-ui/core/InputAdornment';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
import InfoIcon from '@material-ui/icons/InfoIcon';

<TextField
    id="createdate"
    label="Create Date"
    value={dateCheck(workOrderDetail.reported_date, 'll') } 
    variant="filled"
    disabled
    fullWidth
    InputProps={{
      style: style.textFieldInput,
      startAdornment: (
        <InputAdornment position="start">
          <AccountCircle />
        </InputAdornment>
      ),
    }}
/>

參考： React，Material-UI文檔，輸入字段

Answer 2

所以我這樣做是為了使造型正確。 我做了一個功能：

       const label = () => {
             return (
             <React.Fragment>
                Create Date <InfoIcon fontSize='small'></InfoIcon>
             </React.Fragment>
            )
       }

       <Grid item xs={5}>
        <TextField
          id="createdate"
          label={label()}
          value={dateCheck(workOrderDetail.reported_date, 'll') }
          inputProps={{ style: style.textFieldInput }}
          variant="filled"
          disabled
          fullWidth
        />
      </Grid>