React Headroom not working with Material UI (0.20.0) dialog

[tiggem1993]

I am using react Headroom (^2.2.2) which is not working with React Matrial UI (0.20.0) dialog. Code is given below. Kindly have a look and let me know abut the issue. TIA

--MyPopup.js --

import React, { Component } from 'react';
import {withRouter} from 'react-router-dom';
import IconButton from 'material-ui/IconButton';
import Dialog from 'material-ui/Dialog';
import HeaderType2 from 'routes/common/HeaderType2';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import styles from '../style.scss';

const style = {
  dialogContentStyle:{
      width: '100%',
      maxWidth: 'none',
      padding:0,
      transform: 'translate(0, 0)'
  },
  dialogBodyStyle:{
      width: '100%',
      backgroundColor:'#eeeeee',
      padding:0,
      color:'black'
  },
  overlaystyle:{
    backgroundColor:'white',
    paddingTop:0
  }    
};

class MyPopup extends Component{ 
  state = {
    isPostCommentVisible:false    
  }

  postcomment = () => {    
    this.setState({isPostCommentVisible:true})
  }

  goBack = () =>{         
    if(this.state.isPostCommentVisible){
      this.setState({isPostCommentVisible:false})
    }   
  } 

  render() {   
    var that = this;    
    return(<MuiThemeProvider>
      <div> 
        <IconButton onClick={that.postcomment} iconClassName={`${styles.icons} ${styles.wm_icon_comment}`} iconStyle={style.iconStyle}  style={style.btnStyle} />       
        {
          (that.state.isPostCommentVisible)
          ?
          <Dialog contentStyle={style.dialogContentStyle} style={style.overlaystyle} overlayStyle={{backgroundColor:'transparent'}} bodyStyle={style.dialogBodyStyle} paperClassName={`${styles.boxShadowNone}`} bodyClassName={`${styles.bodyClassName}`} autoScrollBodyContent={true} repositionOnUpdate={false} open={that.state.isPostCommentVisible} modal={true}>

            <HeaderType2 styles={styles} title={"Offers and Questions"} goBack={this.goBack} />
            
            ... code ....
            ... code ....
            ... code ....
            ... code ....
            
          </Dialog>
          :
          null
        }
        
      </div>
    </MuiThemeProvider>);
   
  }
}

export default withRouter(MyPopup);

--HeaderType2.js--

import React, { Component } from 'react';
import Headroom from 'react-headroom';
import {withRouter} from 'react-router-dom';

import styles from './style.scss';

class HeaderType2 extends Component { 

  state={
      headroomStyleTranslateY:"translateY(0%)"
    }   

  onPin=() =>{
    this.setState({headroomStyleTranslateY:'translateY(0%)'});        
  }

  onUnpin=() =>{
    this.setState({headroomStyleTranslateY:'translateY(-100%)'});        
  }

  onUnfix=() =>{    
    this.setState({headroomStyleTranslateY:'translateY(0%)'});    
  }

  render() {
    var that = this;
    var headroomStyle = function() {
      return(
        {   
          transform:that.state.headroomStyleTranslateY,
          WebkitTransition: 'all .5s ease-in-out', 
          MozTransition: 'all .5s ease-in-out',
          OTransition: 'all .5s ease-in-out', 
          transition: 'all .5s ease-in-out',
          position:'fixed',
          width:'100%',
          top:0,
          zIndex:2
          
        }
      )
    }

    return (<Headroom pinStart={5} upTolerance={10} disableInlineStyles={true} wrapperStyle={{zIndex:2}} style={headroomStyle()} onPin={that.onPin} onUnpin={that.onUnpin} onUnfix={that.onUnfix}>
      <div className={styles.container}>
         ... code ....
         ... code ....
         ... code ....
      </div>
    </Headroom>);
  }
}

export default withRouter(HeaderType2);

[MaralS]

I still have the same problem. Did you find a solution @tiggem1993 ?
I created a modal component from scratch and a animated it with react-transition-group. When I click on my modal window the overlay is a top level (z-index: 9999999) but the headroom is still overriding my style even if the z-index is set to 2.
@KyleAMathews do you have a solution for that ?

Thanks a lot,

[yakovenkoroman1993]

this package doesn't work inside react-bootstrap/Modal

[yakovenkoroman1993]

Found solution:

<div ref={ref} style={{ overflow: auto, maxHeight: 500 }}>
  ...
  <Headroom
    parent={() => ref.current || document.createElement("div")}
  >
    <h1>Floating element</h1>
  </Headroom>
</div>