使用 react-modal 更改模態的樣式

Question

我有這個對象，具有我想要的模態樣式：

const customStyles = {
  content: {
    top: '35%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    marginRight: '-50%',
    width: '60%',
    transform: 'translate(-40%, -10%)',
  },
};

然后我將這些樣式傳遞給模態，如下所示：

            <Modal
              isOpen={this.state.modalIsOpen}
              onRequestClose={this.closeModal}
              style={customStyles}
            >

它工作正常，但我想傳遞一個類，而不是在組件內創建 customStyle 對象。

我嘗試這樣的事情，首先創建模態類：

.modal {
  top: '35%';
  left: '50%';
  right: 'auto';
  bottom: 'auto';
  marginRight: '-50%';
  width: '60%';
  transform: 'translate(-40%, -10%)';
}

接着：

            <Modal
              isOpen={this.state.modalIsOpen}
              onRequestClose={this.closeModal}
              className="modal"
            >

但它沒有用。 我究竟做錯了什么？

Answer 1

我認為可能有十億種方法可以做到這一點，這只是使用CSS模塊的一種。 如果將樣式放入單獨的.css.js文件中，則可以將其導入模塊中：

/// modal.css.js ///
export default {
  modal: {
    top: '35%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    marginRight: '-50%',
    width: '60%',
    transform: 'translate(-40%, -10%)'
  },
  greenText: {
    color: 'rgb(0,255,100)'
  },
  style3: {
    marginRight: '-25%'
  }
}

然后，您可以像訪問任何對象一樣通過訪問樣式來分配樣式，並將其應用於style屬性上的組件

import styles from './modal.css.js'

...

<Modal
  isOpen={this.state.modalIsOpen}
  onRequestClose={this.closeModal}
  style={styles.modal}
>

如果要對組件應用多種樣式，請為style屬性提供一個數組。 這將允許您從多個導入的樣式對象中應用樣式。

<Modal
  isOpen={this.state.modalIsOpen}
  onRequestClose={this.closeModal}
  style={[styles.modal, styles.greenText]}
>

Answer 2

它應該是portalClassName：

<Modal
  isOpen={this.state.modalIsOpen}
  onRequestClose={this.closeModal}
  portalClassName="modal"
>

Answer 3

 <ReactModal id={this.state.dialogId}
              isOpen={showDialog}
              onRequestClose={this.onCancel.bind(this)}
              className={`shadow p-4`}
              style={{
                overlay: {
                  position: 'fixed',
                  zIndex: 1020,
                  top: 0,
                  left: 0,
                  width: '100vw',
                  height: '100vh',
                  background: 'rgba(255, 255, 255, 0.75)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                },
                content: {
                  background: 'white',
                  width: '45rem',
                  maxWidth: 'calc(100vw - 2rem)',
                  maxHeight: 'calc(100vh - 2rem)',
                  overflowY: 'auto',
                  position: 'relative',
                  border: '1px solid #ccc',
                  borderRadius: '0.3rem',
                }}}
              appElement={document.getElementById('root') as HTMLElement}> ... </ReactModal>

Answer 4

我試過這種方式，它對我來說很好用我在反應模態標簽中添加了一個簡單的類

 <Modal
            size="sm"
            aria-labelledby="contained-modal-title-vcenter"
            className='modalStyle'
            centered
            show={prescriptionPreview}
            onHide={() => setPrescriptionPreview(false)}
        >

然后我去了 app.css 並像這樣選擇

.modalStyle .modal-dialog 

並隨心所欲地設計它