react-window spacing between items 列表

问：

我正在尝试将 react-window 与 react-window-infinite-loader 集成，到目前为止，我已经成功了，但面临一个问题，即我无法找到一种方法来设置列表项的样式以在列表项之间创建更多间距。

这是我下面的代码

export default function AutoComplete({}: AutoCompleteProps) {
  //testdata length is 35000
  const LOADING = 1;
  const LOADED = 2;

  const isItemLoaded = (index) => testData[index]?.loading === LOADED;
  const loadMoreItems = (startIndex, stopIndex) => {
    for (let index = startIndex; index <= stopIndex; index++) {
      testData[index].loading = LOADING;
    }
    return new Promise<void>((resolve) =>
      setTimeout(() => {
        for (let index = startIndex; index <= stopIndex; index++) {
          testData[index].loading = LOADED;
        }
        resolve();
      }, 2500)
    );
  };
  const Row = ({ index, style }) => {
    let label;
    if (testData[index].loading === LOADED) {
      label = `${testData[index].title}`;
    } else {
      label = "Loading...";
    }
    const listStyle = { ...style };
    return (
      <div
        className={`whitespace-nowrap overflow-hidden text-ellipsis`}
        style={style}
      >
        <div>{label}</div>
      </div>
    );
  };

  return (
    <InfiniteLoader
      isItemLoaded={isItemLoaded}
      itemCount={testData.length}
      loadMoreItems={loadMoreItems}
    >
      {({ onItemsRendered, ref }) => (
        <List
          style={{ position: "absolute", width: "100%", marginTop: 50 }}
          className="absolute top-[110%] z-50 bg-white w-full"
          height={250 - 40}
          itemCount={testData.length}
          itemSize={30}
          width={300}
          onItemsRendered={onItemsRendered}
          ref={ref}
        >
          {({ index, style }) => <Row index={index} style={style} />}
        </List>
      )}
    </InfiniteLoader>
  );
}

输出是共享的，因为您可以看到列表项彼此非常接近，我需要添加一些填充，也许可以使它看起来更干净。