Материал-UI Список элементов прокручивается поверх AppBar

Question

Я использую Material-UI (http://material-ui.com) для React.JS, чтобы сделать мобильное приложение. У меня проблема с элементами списка, прокручивающими их содержимое поверх панели приложений. Другое содержимое (например, обычный текст абзаца в документе </>) прокручивается в порядке.

Эта фотография показывает, как прокручивать содержание получает в верхней части приложения бар:

В то время как эти фотографии показывают некоторые дополнительные обычный текст (источник ниже), прокручивать штраф:

Элементы «Некоторые тексты» прокручиваются правильно под 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>; 

Styling:

#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; 
} 

UPDATE: Я пытался добавить Z-индекс: 100 до AppBar, но ничего не помогло:

Кроме того, замена списка с таблицей дает довольно много такое же поведение, то есть некоторое содержание (заголовок и выберите поле) находится над AppBar в то время как другой контент прокручивается красиво под ним:

Answer 1

Добавить z-index: 100, или больше, если вам нужно AppBar.