如何在材质 ui 中做出这样的反应？答案

【问题标题】：How to make something like this in material ui react?如何在材质 ui 中做出这样的反应？
【发布时间】：2018-08-28 08:00:13
【问题描述】：

我怎样才能在材料 ui 中做出反应？

我的主要问题是我不知道如何使用刷新图标制作正确的部分。

【问题讨论】：

标签： material-ui

【解决方案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>
 );
 }

这将创建如下内容：

【讨论】：

【解决方案2】：

检查这个带有图标搜索的示例，只需将图标向右对齐：

https://codesandbox.io/s/material-demo-jhy9f

【讨论】：