javascript - react 完美的滚动条导致小屏幕尺寸出现问题

Question

这是一个 Material ui 模板，它在小屏幕尺寸下存在问题，滚动条可能不会出现，直到您单击表格并在控制台中出现:

节点模块中存在错误，但我真的不觉得可以通过修改节点模块文件来修复它，而是通过更改组件的 jsx 所以我在网上找到的所有解决方案都将“touchStart”设置为被动，我不觉得那是解决方案，但我们需要组件本身的解决方案
而且我不知道如何在组件本身中修复它
这是组件:

const LatestOrders = ({ className, ...rest }) => {
  const classes = useStyles();
  const [orders] = useState(data);
 
  return (
    <Card
      className={clsx(classes.root, className)}
      {...rest}
    >
      <CardHeader title="Latest Orders" />
      <Divider />
      <PerfectScrollbar>
        <Box minWidth={800}>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>
                  Order Ref
                </TableCell>
                <TableCell>
                  Customer
                </TableCell>
                <TableCell sortDirection="desc">
                  <Tooltip
                    enterDelay={300}
                    title="Sort"
                  >
                    <TableSortLabel
                      active
                      direction="desc"
                    >
                      Date
                    </TableSortLabel>
                  </Tooltip>
                </TableCell>
                <TableCell>
                  Status
                </TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {orders.map((order) => (
                <TableRow
                  hover
                  key={order.id}
                >
                  <TableCell>
                    {order.ref}
                  </TableCell>
                  <TableCell>
                    {order.customer.name}
                  </TableCell>
                  <TableCell>
                    {moment(order.createdAt).format('DD/MM/YYYY')}
                  </TableCell>
                  <TableCell>
                    <Chip
                      color="primary"
                      label={order.status}
                      size="small"
                    />
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </Box>
      </PerfectScrollbar>
     
      <Box
        display="flex"
        justifyContent="flex-end"
        p={2}
      >
        <Button
          color="primary"
          endIcon={<ArrowRightIcon />}
          size="small"
          variant="text"
        >
          View all
        </Button>
      </Box>
    </Card>
  );
};

LatestOrders.propTypes = {
  className: PropTypes.string
};

Answer 1

我遇到了同样的问题并通过添加 style={{ touchAction: "none" }} 来修复它到ScrollBar零件。

import ScrollBar from "react-perfect-scrollbar";


<ScrollBar style={{ touchAction: "none" }}>
  ...
</ScrollBar>