Reactjs React虚拟化表未呈现为表

我有一个基于的超级基本示例，但它不起作用：

import React from 'react';
import {
  Table,
  Column,
} from 'react-virtualized'

function MyTable(props) {
  return (
    <Table
      width={ 900 }
      height={ 500 }
      headerHeight={ 30 }
      rowHeight={ 30 }
      rowCount={ props.list.length }
      rowGetter={ ({ index }) => props.list[index] }
    >
      <Column
        width={ 250 }
        dataKey={ 'id' }
        headerRenderer={ ({ dataKey }) => 'Id' }
      />
      <Column
        width={ 250 }
        dataKey={ 'title' }
        headerRenderer={ ({ dataKey }) => 'Title' }
      />
    </Table>
  );
}

从“React”导入React；
进口{
桌子
专栏，
}从“反应虚拟化”
功能MyTable（道具）{
返回(
props.list[索引]}
>
'Id'}
/>
“标题”}
/>
);
}

结果是：

---

我确信我肯定遗漏了什么，我遗漏了什么，为什么它没有显示为表？

您没有导入CSS。

表

组件是唯一需要CSS来设置flexbox布局样式的组件

退房：

---

如果需要，还可以为表格提供自己的样式。在作为导入链接回类的css中，您可以定义react virtualize内置类，如下所示：

:global {
  .ReactVirtualized__Table {

  }

  .ReactVirtualized__Table__headerColumn {

  }

  .ReactVirtualized__Table__headerRow {

  }

  .ReactVirtualized__Table__row {

  }

  .ReactVirtualized__Table__rowColumn {

  }
}

我建议使用flex来操纵表格外观。希望有帮助

:global {
  .ReactVirtualized__Table {

  }

  .ReactVirtualized__Table__headerColumn {

  }

  .ReactVirtualized__Table__headerRow {

  }

  .ReactVirtualized__Table__row {

  }

  .ReactVirtualized__Table__rowColumn {

  }
}