使用 react-modal 更改模式的样式答案

【问题标题】：Change the style of a modal using react-modal使用 react-modal 更改模式的样式
【发布时间】：2018-09-16 22:35:35
【问题描述】：

我有这个对象，带有我想要的模态样式：

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"
            >

但它没有用。我做错了什么？

【问题讨论】：

在我看来，您似乎没有做错什么。有可能你没有包含你的 CSS 或者你已经加载了一些覆盖你的 CSS 所做的事情。尝试更改您申请的课程的名称，看看是否有效。否则，请使用控制台检查器查看是否有任何内容优先于您的 CSS，或者是否已加载。

标签： javascript css reactjs modal-dialog styles

【解决方案1】：

应该是portalClassName：

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

【讨论】：

这完全解决了 OP（和我）的问题，应该是 imo 接受的答案。

【解决方案2】：

我认为可能有十亿种方法可以做到这一点，这只是一种使用 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%'
  }
}

然后，您可以像访问任何对象一样访问它们来分配样式，并将它们应用于样式属性上的组件

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]}
>

【讨论】：

你怎么能以这种方式设置模态框（即叠加层）的背景颜色？
@haz 你会遵循.overlay { } 类的约定，然后将其添加到模态道具：overlayClassName={styles.overlay}

【解决方案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>

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation 将通过展示为什么这是解决问题的好方法，并使其对有其他类似问题的未来读者更有用，从而大大提高其长期价值。请edit您的回答添加一些解释，包括您所做的假设。

【解决方案4】：

我尝试过这种方式，它对我很好我在反应模式标签中添加了一个简单的类

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

然后我去app.css并像这样选择

.modalStyle .modal-dialog

随心所欲地设置样式

【讨论】：