如何使MaterialUI中的列表换行？

Question

import React from 'react';
import {
  List, ListItem,
} from '@material-ui/core';
import {
  makeStyles, createStyles,
} from '@material-ui/core/styles';
import clsx from 'clsx';
import VideoCard from './VideoCard';

const useStyles = makeStyles(() => createStyles({
  root: {
    display: 'inline-flex',
  },
  item: {
    padding: '80px 40px',
  },

}));

export default function VideoList(props: any) {
  const { videos } = props;
  const classes = useStyles();
  return (
    <div>
      <List className={clsx(classes.root)}>
        {videos.map((video: any) => (
          <ListItem className={classes.item} button key={video}>
            <VideoCard videoTitle={video.title} thumbnailImage={video.imageSrc} key={video} />
          </ListItem>
        ))}
      </List>
    </div>
  );
}

import React from 'react';
import Typography from '@material-ui/core/Typography';
import clsx from 'clsx';
import Thumbnail from './Thumbnail';

export default function VideoCard(props: any) {
  const { thumbnailImage, videoTitle } = props;
  return (
    <div>
      <Thumbnail imageSrc={thumbnailImage} />
      <Typography>{videoTitle}</Typography>
    </div>
  );
}

我正在尝试显示一系列视频标题和缩略图（例如，视频卡在youtube的首页上的显示方式）。我如何让卡每隔四张卡就转到新的一行？目前，他们排队并离开屏幕。

编辑：还添加了我的视频卡代码

Answer 1

将其设置为Message，然后将Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 设置为每4张卡换一个新行

null