Reactjs 如何使用右侧的按钮创建文本字段？

我想构建一个表单，其中包含一些只读文本字段，右侧有一个复制按钮。 文本字段应占据除按钮空间外的所有可用水平空间。 如何使用material-ui.com库组件正确布局它们

我现在使用的渲染代码：

    import {CopyToClipboard} from 'react-copy-to-clipboard'

    <Grid container className={classes.content}>
      <Grid item xs={12} className={classes.row}>
        <ButtonGroup fullWidth className={classes.buttonGroup}>
          <TextField
            id="epg-value"
            label="Value"
            value={null !== value ? value : ""}
            className={classes.textField}
            margin="dense"
            variant="standard"
            InputProps={{
              readOnly: true,
            }}
          />
          <CopyToClipboard text={null !== value ? value : ""}
            onCopy={() => {alert("copied")}}>
            <IconButton
              aria-label="Copy to clipboard"
              title="Copy to clipboard"
              classes={{
                root: classes.button
              }}
              color="primary"
              edge="end"
            >
              <FileCopy/>
            </IconButton>
          </CopyToClipboard>
        </ButtonGroup>
      </Grid>
    </Grid>

当前外观：

使用InputProps，并为其提供尾饰。简单的例子：

 <TextField
    id="standard-name"
    label="Name"
    value="hello"
    InputProps={{endAdornment: <YOUR_COPY_ICON_BUTTON />}}
  />

---

用

flex

包裹

Textfield

和

FileCopy

，示例：

 <TextField
    id="standard-name"
    label="Name"
    value="hello"
    InputProps={{endAdornment: <YOUR_COPY_ICON_BUTTON />}}
  />