Material-UI 列表项在 AppBar 顶部滚动

Question

我正在使用 Material-UI (http://material-ui.com) for React.JS 制作移动应用程序。我在应用栏顶部滚动列表项时遇到问题。其他内容（例如中的普通段落文本）可以正常滚动。

此图显示滚动内容如何到达应用栏顶部：

虽然这些图片显示了一些添加的普通文本（来源如下），滚动效果很好：

"Some text" 元素在 AppBar 下正确滚动：

"Ordinary" 文本（即不是从 ListItem 属性生成的文本）滚动良好：

这是主要的列表渲染代码：

renderConcerts() {
    return this.props.search.list.map((concert) => {
        return (
            <ListItem key={concert.id}
              primaryText={concert.work}
              secondaryText={concert.composer}
            />
        )
    });
}
renderContent() {
    console.log("renderContent ", this.props.search.classifier);
    const style = {
        margin: 12,
    };
    ....

    return <div id="mypaper">
      <p>Some text1</p>
      <Paper style={style}>
        <p>Some text2</p>
        <div className="content">
          <p>Some text3</p>
          <List>
            {this.renderConcerts()}
          </List>
        </div>
      </Paper>
    </div>;
}

render() {
    console.log("render");
    return (
        <div>
            <ResultHeader/>
            {this.renderContent()}
        </div>
    );
}

ResultHeader 组件：

export const ResultHeader = (props) =>
    <header>
        <AppBar
            title="Results"
            onLeftIconButtonTouchTap={hashHistory.goBack}
            iconElementLeft={<IconButton><ArrowBack /></IconButton>}
        />
    </header>;

样式：

#mypaper {
    width: 100%;
    margin: 0 auto;
    padding: 60px 0;
    overflow: auto; !important;
}
.content {
    margin: 10px;
    padding-bottom: 26pt;
    font-size: 12px;
    text-align: left;
}
.content table, .season tbody {
    border: none;
    font-size: 12px ;
}
.content h2 {
    font-size: x-large;
    color: #19768F;
    margin-top: 10px;
    margin-bottom: 3px;
}
.content h3 {
    font-size: 14px ;
    font-style: normal;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 2px;
    color: #313C3F;
}

更新：我尝试将 z-index: 100 添加到 AppBar，但没有任何帮助：

此外，用 Table 替换 List 会给出几乎相同的行为，即一些内容（标题和 select 框）在 AppBar 上方，而其他内容在其下方很好地滚动：

Answer 1

如果需要 AppBar，请添加 z-index: 100 或更多。

Material-UI 列表项在 AppBar 顶部滚动

Material-UI List items scroll on top of AppBar

reactjs

material-ui