Question

我正在使用Material-UI（http://material-ui.com）为React.JS制作移动应用。列表项在应用栏顶部滚动其内容时遇到问题。其他内容（例如＆lt; Paper /＆gt;中的普通段落文本）滚动得很好。

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

虽然这些图片显示了一些添加的普通文本（下面的源代码），但滚动得很好：

“某些文字”元素在AppBar下正确滚动：

“普通”文本（即不是从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，但它没有任何帮助：

此外，将List替换为Table会产生几乎相同的行为，即一些内容（标题和选择框）在AppBar上，而其他内容在其下滚动很好：

Answer 1

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

Material-UI List项目在AppBar顶部滚动

1 个答案: