命名约定已关闭。请忽略这些。
appbar的部分代码：

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1
  },
  title: {
    flexGrow: 1
  }
}));

export default function Appp() {
  const classes = useStyles();
  const history = useHistory();

  return (
    <div className={classes.root}>
      <Router>
        <AppBar position="static" display="flex">
          <Toolbar>
            <Typography variant="h6" className={classes.title}>
              Employee Management
            </Typography>
            <Button
              variant="contained"
              color="secondary"
              className={classes.button}
            >
              <Link to="/emp">Fetch Employees</Link>
            </Button>
            <Switch>
              <Route exact path="/emp" render={(props) => <App {...props} />} />
            </Switch>
          </Toolbar>
        </AppBar>
        <br/>
      </Router>
    </div>
  );
}

应用程序组件（“用户”是从api调用接收的json数据）：

return (
    <div className="App">
      {user &&
        user.map((singleUser) => {
          return (
            <SimpleCard
              nam={singleUser.name}
              uname={singleUser.username}
              ph={singleUser.phone}
              wb={singleUser.website}
            ></SimpleCard>
          );
        })}
    </div>
  );
}

simplecard组件：

export default function SimpleCard(props) {
  const classes = useStyles();

  return (
    <Card padding={6} style={{ backgroundColor: "red", display: "inline-block" }}>
      <CardContent>
        <Typography
          className={classes.title}
          color="textSecondary"
          gutterBottom
        >
          <h1>{props.nam}</h1>
        </Typography>
        <Typography variant="h5" component="h5">
          #{props.uname}
        </Typography>
        <Typography className={classes.pos} color="textPrimary">
          adjective
        </Typography>
        <Typography variant="body2" component="p">
          well meaning and kindly.
          <br />
        </Typography>
      </CardContent>
    </Card>
  );
}

因此，当点击FetchEmployees按钮时，我希望显示带有信息的卡片。然而，它们只是被添加到appbar中，ui一团糟。