材质用户界面v1表与滚动（溢出：滚动）

Question

如何在材质用户界面v1（v1-beta目前）中使用滚动溢出创建表？在MUI文档中的组件演示中，没有这样的例子。

Answer 1

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

注：这不会解决您的列标题，因为它被应用于容器。此调整将对整个表应用滚动条 - 标题，正文，页脚等。