Javascript react perfect scrollbar在小屏幕上会导致问题

这是一个材质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
};

constlatestorders=（{className，…rest}）=>{
const classes=useStyles（）；
const[订单]=使用状态（数据）；
返回(
订单号
顾客
日期
地位
{orders.map（（order）=>(
{order.ref}
{order.customer.name}
{矩（order.createdAt）.format（'DD/MM/YYYY'）}
))}
查看所有
);
};
LatestOrders.propTypes={
类名：PropTypes.string
};

我遇到了同样的问题，并通过将

样式={{{touchAction:“none”}}

添加到

滚动条

组件来修复它

import ScrollBar from "react-perfect-scrollbar";


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

从“react perfect ScrollBar”导入滚动条；
...
如果你在滚动条中考虑更多的自定义，你可以使用这个滚动条库并做任何你想要的定制，它是非常可靠的：