如何使用useMediaQuery为大，中，大屏幕设置Material-UI断点

如何解决如何使用useMediaQuery为大，中，大屏幕设置Material-UI断点

我正在开发一个带有事件的React应用程序。我设法使我的事件列表在大屏幕上设置为3列，在XS屏幕上设置为1列。现在，我要做的是使事件列表在中等屏幕上显示2个列。

在大屏幕上显示3 cols，在2 cols屏幕上显示medium，在xs屏幕上显示1 cols 。

这是我组件的断点

  const matches = useMediaQuery(theme.breakpoints.down("xs"));


return (
<div className={classes.root}>
  <GridList
    cellHeight={420}
    className={classes.gridList}
    spacing={12}
    cols={matches ? 1 : 3}
  >
    {tileData.map((event,key) => {
      return (
        <Card
          style={{
            marginBottom: "2rem",textDecoration: "none",}}
          component={Link}
          to={"/events/" + event._id + "/eventcomments"}
          key={Math.floor(Math.random() * new Date().getTime())}
        >
          <h3
            style={{
              background: " #800000",color: "white",textAlign: "center",}}
            className={classes.cardheader}
          >
            {event.title}
          </h3>

          <CardHeader
            avatar={
              <Avatar aria-label="recipe" className={classes.avatar}>
                CB
              </Avatar>
            }
            title={getTitle(
              Date.parse(event.startingDate),Date.parse(event.closingDate)
            )}
            subheader={getEnded(
              Date.parse(event.startingDate),Date.parse(event.closingDate)
            )}
            style={{ background: "#DCDCDC" }}
          />
          <CardMedia
            className={classes.media}
            image={event.eventImage}
            title="Paella dish"
          />
          <CardContent>
            <Typography
              style={{ color: "black",fontSize: "16px" }}
              variant="body2"
              color="textSecondary"
              component="p"
            >
              {event.description.substring(0,100)}....
            </Typography>
          </CardContent>
        </Card>
      );
    })}
    ;
  </GridList>
</div>
);

解决方法

您只需要第二个媒体查询就可以区分大中型：

var Dialog = require('web.Dialog');
var BasicController = require('web.BasicController');
BasicController.include({
    _deleteRecords: function (ids) {
        var self = this;
        var _super = this._super.bind(this,ids);
        if (self.modelName === 'res.partner') {
            Dialog.confirm(self,_t("Are you sure you want to delete this record ?"),{
                confirm_callback: _super,});
            self.confirmOnDelete = false;
        } else {
            _super();
        }
    },});