Я пытаюсь добавить InfoIcon Material-UI в мой код. Но я не знаю, как реализовать это в TextField

Question

Я пытаюсь добавить InfoIcon Material-UI -> в мой код. Но я не знаю, как реализовать это в TextField.

Вот код материала-интерфейса:

      <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

Итак, вот что я сделал, чтобы сделать стиль правильным. Я сделал функцию:

       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>

Answer 2

Вы должны поместить свой значок с 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, Документация по интерфейсу материалов, поля ввода