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

Posted 2023-02-22

【中文标题】使用 react-modal 更改模式的样式

【英文标题】：Change the style of a modal using 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，或者是否已加载。

【参考方案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 

随心所欲地设置样式