Question

我正在尝试将样式设置为我的模态，以便在不同媒体中使用。在react js中，我使用了customStyle

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 (
      <div>
        <button onClick={this.openModal}>Open Modal</button>
        <Modal
          isOpen={this.state.modalIsOpen}
          onAfterOpen={this.afterOpenModal}
          onRequestClose={this.closeModal}
          style={customStyles}
          contentLabel="Example Modal"
        >

          <h2 ref={subtitle => this.subtitle = subtitle}>Hello</h2>
          <button onClick={this.closeModal}>close</button>
          <div>I am a modal</div>
        </Modal>
      </div>
    );
  }
}

我如何添加更多样式功能以获得resposive模式，谢谢。如何在我的代码中将@media样式添加到react-modal。请帮我。非常感谢。

Answer 1

您可以只为您的Modal和/或其子DOM添加类/ ID，然后使用普通的CSS文件，并使用@medi声明，并根据需要设置样式的样式！

您只需在主index.html文件中包含该普通CSS文件即可。

Answer 2

您可以尝试使用className并为其添加css。

<ReactModal 
       isOpen={this.state.showModal}
       contentLabel="onRequestClose Example"
       onRequestClose={this.handleCloseModal}
       className="YouClass"
       overlayClassName="Overlay"
    >
      <p>Modal text!</p>
      <button onClick={this.handleCloseModal}>Close Modal</button>
    </ReactModal>

请阅读更多内容：https://codepen.io/claydiffrient/pen/KNjVrG

如何在React js中设置响应式样式来反应模态？

2 个答案: