Как заставить что-то подобное в материале реагировать?

Question

Как я могу сделать это в материале UI реагировать?

Основная проблема у меня в том, что я не знаю, как сделать правильную часть с помощью значка обновления.

Answer 1

Этот вопрос является любительским вопросом. Но я могу дать вам небольшое представление о том, как вы можете начать с небольших основ, а позже вы можете сделать это компонентом с состоянием.

const styles = theme => ({
margin: {
    margin: theme.spacing.unit,
  },
  roundBorder : {
    borderRadius: '25px',
    borderColor: '#80bdff',
    border: '1px solid #ced4da',
  }
});

function App(props) {
const { classes } = props;

return (
<div>

  <div className={classes.margin}>
    <Grid container spacing={8} alignItems="flex-end">

      <Grid item>
        <TextField className={classes.roundBorder} id="input-with-icon-grid" label="With a grid" />
      </Grid>
      <Grid item>
        <AccountCircle />
      </Grid>
    </Grid>
  </div>
</div>
 );
 }

Это создаст что-то вроде этого: