小编ole*_*abr的帖子

我想构建一个带有一些只读文本字段的表单，右侧有一个复制按钮。文本字段应占据除按钮空间之外的所有可用水平空间。如何使用 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>

这个解决方案有两个问题：

1. 按钮看起来很丑。我已经进行了 css 调整，但默认情况下它看起来非常难看。

2. 它在浏览器控制台中产生警告，如下所示：

   Warning: React does not recognize the `disableFocusRipple` prop …

   Run Code Online (Sandbox Code Playgroud)