具有滚动的材质UI v1表(溢出:滚动)

Question

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

Answer 1

在所有Table示例中,都有一个类应用于div包含Table配置水平滚动的类.除非您使用足够小的视口查看文档,否则不明显.(见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',
  },
});

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