material-ui - 带有滚动条的 Material UI v1 表格(溢出 : scroll)

Question

如何在 Material UI v1(当前为 v1-beta)中创建带有滚动溢出的表格？在 MUI 文档的组件演示中，没有这样的示例。

Answer 1

在所有表示例中，都有一个应用于 div 的类。包含 Table配置水平滚动。除非您使用足够小的视口(viewport)查看文档，否则这并不明显。 (见 BasicTable.js):

const styles = theme => ({
  paper: {
    width: '100%',
    marginTop: theme.spacing.unit * 3,
    overflowX: 'auto',
  },
});

paper类应用于根元素:

function BasicTable(props) {
  const classes = props.classes;

  return (
    <Paper className={classes.paper}>
      <Table>
        ...

如果您想要垂直滚动，则需要指定高度并包括 overflow-y 的注意事项.如果你想要水平和垂直滚动，你可以设置 overflow并且两个轴都将被配置:

const styles = theme => ({
  paper: {
    height: 300,
    width: '100%',
    marginTop: theme.spacing.unit * 3,
    overflow: 'auto',
  },
});

注:这不会修复您的列标题，因为它已应用于容器。此调整会将滚动条应用于整个表格 - 标题、正文、页脚等。