无效的钩子调用 Material Ui

时间:2021-07-26 18:39:13

标签: reactjs material-ui

不工作反应 js matarial-ui 无效钩子调用。

 const useStyles = makeStyles((theme) => ({
      root: {
        maxWidth: 345,
      },
      media: {
        height: 0,
        paddingTop: "56.25%", // 16:9
      },
      expand: {
        transform: "rotate(0deg)",
        marginLeft: "auto",
        transition: theme.transitions.create("transform", {
          duration: theme.transitions.duration.shortest,
        }),
      },
      expandOpen: {
        transform: "rotate(180deg)",
      },
      avatar: {
        backgroundColor: red[500],
      },
    }));
    export default function Room({ room }) {
      const classes = useStyles();
      const history = useHistory();
      const handleBook = (bedType) => {
        history.push(`/book/${bedType}`);
      };
      return (
        <Card className={classes.root}>
          <CardHeader
            avatar={
              <Avatar aria-label="recipe" className={classes.avatar}>
                {room.avatar}
              </Avatar>
            }
            title={room.title}
          />
          <CardMedia
            className={classes.media}
            image={room.imgUrl}
            title="Paella dish"
          />
          <img src={`/images/${room.bedType}.png`} alt="" />
          <CardContent>
            <Typography variant="body2" color="textSecondary" component="p">
              {room.description}
            </Typography>
          </CardContent>
          <CardActions disableSpacing>
            <IconButton aria-label="add to favorites">
              <LocalHotelIcon />: {room.bed}
            </IconButton>
            <IconButton aria-label="share">
              <WcIcon />: {room.capacity}
            </IconButton>
            <IconButton aria-label="price">
              <AttachMoneyIcon />: {room.price}
            </IconButton>
            <Button
              onClick={() => handleBook(room.bedType)}
              variant="contained"
              color="primary"
            >
              Book
            </Button>
          </CardActions>
        </Card>
      );`enter code here`
    }

0 个答案:

没有答案