如何在 TextField 的右侧添加一个 Button？

Question

I want to build a form with some readonly text fields with a copy button on the right. The text field should occupy all horizontal space available except the button space. How to layout them correctly with the material-ui.com library components?

Render code I'm using now:

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>

There are two problems with this solution:

1. button looks ugly. I've made css adjustments but by default it looks really ugly.

2. it produces Warnings in browser console, like this one:

    Warning: React does not recognize the `disableFocusRipple` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `disablefocusripple` instead. If you accidentally passed it from a parent component, remove it from the DOM element. in div (created by ForwardRef(FormControl)) in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl))) in WithStyles(ForwardRef(FormControl)) (created by ForwardRef(TextField)) in ForwardRef(TextField) (created by WithStyles(ForwardRef(TextField))) in WithStyles(ForwardRef(TextField)) (created by AdvancedPanel) in div (created by ForwardRef(ButtonGroup)) in ForwardRef(ButtonGroup) (created by WithStyles(ForwardRef(ButtonGroup))) in WithStyles(ForwardRef(ButtonGroup)) (created by AdvancedPanel) in div (created by ForwardRef(Grid)) in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid))) in WithStyles(ForwardRef(Grid)) (created by AdvancedPanel) in div (created by ForwardRef(Grid)) in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid))) in WithStyles(ForwardRef(Grid)) (created by AdvancedPanel) in div (created by ForwardRef(ExpansionPanelDetails)) in ForwardRef(ExpansionPanelDetails) (created by WithStyles(ForwardRef(ExpansionPanelDetails))) in WithStyles(ForwardRef(ExpansionPanelDetails)) (created by AdvancedPanel) in div (created by ForwardRef(ExpansionPanel)) in div (created by Transition) in div (created by Transition) in div (created by Transition) in Transition (created by ForwardRef(Collapse)) in ForwardRef(Collapse) (created by WithStyles(ForwardRef(Collapse))) in WithStyles(ForwardRef(Collapse)) (created by ForwardRef(ExpansionPanel)) in div (created by ForwardRef(Paper)) in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper))) in WithStyles(ForwardRef(Paper)) (created by ForwardRef(ExpansionPanel)) in ForwardRef(ExpansionPanel) (created by WithStyles(ForwardRef(ExpansionPanel))) in WithStyles(ForwardRef(ExpansionPanel)) (created by AdvancedPanel) in AdvancedPanel (created by GatewayWidget) in div (created by ForwardRef(Grid)) in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid))) in WithStyles(ForwardRef(Grid)) (created by GatewayWidget) in div (created by ForwardRef(Grid)) in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid))) in WithStyles(ForwardRef(Grid)) (created by GatewayWidget) in div (created by GatewayWidget) in section (created by GatewayWidget) in ThemeProvider (created by GatewayWidget) in GatewayWidget

Current look:

Answer 1

Use InputProps , and provide endAdornment to it. simple example:

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

Answer 2

You can add an IconButton in the endAdornment of the TextField . In addition, you might also want to:

• Set the position='end' in the InputAdornment to add a gap between the input text and the icon.
• Set edge='end' in the IconButton to use a negative margin to counteract the padding on right side of the TextField .

<TextField
  {...props}
  InputProps={{
    endAdornment: (
      <InputAdornment position="end">
        <IconButton edge="end" color="primary">
          <SearchIcon />
        </IconButton>
      </InputAdornment>
    ),
  }}
/>

Live Demo