使用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}
            >

这段代码可以正常工作，但是我想传递一个类，而不是在组件内创建一个自定义样式对象。

我尝试了以下代码，首先创建模态框类：

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

但是它没有起作用。我做错了什么吗？

- Lizz Parody

---

我觉得你没有做错什么。可能是你没有包含CSS文件，或者已经加载了某些东西覆盖了CSS的效果。尝试更改应用的类名，看看是否有效。否则，使用控制台检查器查看是否有任何东西优先于你的CSS，或者是否已经加载。 - zfrisch

Answer 1

应该是portalClassName:

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

- SSS

---

这完全解决了OP（和我）的问题，我认为这应该是被接受的答案。 - JimmyM

Answer 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%'
  }
}

您可以像访问任何对象一样访问您的样式，然后将它们分配给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]}
>

- Lucas Kellner

---

你如何以这种方式设置模态框（即覆盖层）的背景颜色？ - haz

@haz，你需要遵循.overlay { }类的约定，然后将其添加到Modal属性中：overlayClassName={styles.overlay}。 - johnjohn

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>

- Діма Ліщинський

---

感谢您提供这段代码片段，它可能会提供一些有限的、即时的帮助。一个适当的解释将极大地提高其长期价值，因为它可以展示为什么这是一个好的问题解决方案，并使其对未来读者在其他类似问题上更有用。请[编辑]您的答案以添加一些解释，包括您所做的假设。 - helvete

Answer 4

我尝试了这种方法，对我来说运行得很好，我在React模态标签中添加了一个简单的类。

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

然后我进入了app.css文件，并选择了这样的方式

.modalStyle .modal-dialog 

并且可以按照您的喜好进行样式设计

- eslam elameen

Answer 5

如果您需要处理不同的env文件，取决于您的环境，例如：.env.prod和.env.dev，请按照以下步骤操作：

1. 确保.env.prod和.env.dev位于项目的根目录中。

2. 像这样在next.config.js中加载环境变量：

const dotenv = require('dotenv');

const environment = process.env.NODE_ENV || 'development';

if (environment === 'development') {
  dotenv.config({ path: '.env.dev' });
} else {
  dotenv.config({ path: '.env.prod' });
}

module.exports = withBundleAnalyzer({
  // ...
  env: {
    VALUE_1: process.env.VALUE_1,
    VALUE_2: process.env.VALUE_2,
    VALUE_3: process.env.VALUE_3,
  },
});

- Emidomenge