title: How to set responsive style to react modal in React js?
body: <p>I am trying to set styles to my modal for be resposive in different media.
  In react js, I have used customStyle to 
  
  <pre><code>import Modal from 'react-modal';
  
  const customStyles = {
    content : {
      top                   : '50%',
      left                  : '50%',
      right                 : 'auto',
      bottom                : 'auto',
      marginRight           : '-50%',
      transform             : 'translate(-50%, -50%)'
    }
  };
  
  class App extends React.Component {
    constructor() {
      super();
  
      this.state = {
        modalIsOpen: false
      };
  
      this.openModal = this.openModal.bind(this);
      this.afterOpenModal = this.afterOpenModal.bind(this);
      this.closeModal = this.closeModal.bind(this);
    }
  
    openModal() {
      this.setState({modalIsOpen: true});
    }
  
    afterOpenModal() {
      // references are now sync'd and can be accessed.
      this.subtitle.style.color = '#f00';
    }
  
    closeModal() {
      this.setState({modalIsOpen: false});
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;button onClick={this.openModal}&gt;Open Modal&lt;/button&gt;
          &lt;Modal
            isOpen={this.state.modalIsOpen}
            onAfterOpen={this.afterOpenModal}
            onRequestClose={this.closeModal}
            style={customStyles}
            contentLabel="Example Modal"
          &gt;
  
            &lt;h2 ref={subtitle =&gt; this.subtitle = subtitle}&gt;Hello&lt;/h2&gt;
            &lt;button onClick={this.closeModal}&gt;close&lt;/button&gt;
            &lt;div&gt;I am a modal&lt;/div&gt;
          &lt;/Modal&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>How i add more style feature to get resposive modal, thanks.
  How to add @media style to react-modal in my code.
  Please help me.
  Thanks alot.</p>