我正在尝试将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>