Getting problem in styling react modal

scss

.ReactModalPortal>div{
  opacity: 0;
}
.ReactModalPortal .ReactModal__Overlay
{
  // opacity: 1;
  transition: opacity 1000ms ease-in;
}
.ReactModalPortal .ReactModal__Overlay--after-open
{
  opacity: 0;
}
.ReactModal__Overlay--before-close
{
 opacity: 1;
}

modal.js

import React from 'react';
import Modal from 'react-modal';

const OptionModal = (props)=>(
    <div>
      <Modal
        isOpen={!!props.content}
        // onAfterOpen={this.afterOpenModal}
        onRequestClose={props.deleteContent}
        // style={customStyles}
        closeTimeoutMS={1000}
        // ariaHideApp={false}
        contentLabel="hey"
        >
          <h1>You should do this</h1>
          <p>{props.content}</p>
          <button onClick={props.deleteContent}>OKAY</button>
      </Modal>
    </div>
  );

export default OptionModal;

problem is:
on adding this css to a file the model stops appearing to the sceen(on clicking button)
but in the inspect view i can see the class added

before clicking

after clicking