它应该是门户类名：

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

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

如果你想应用多种样式到你的组件，你给予样式属性一个数组。2这将允许你应用来自多个导入样式对象的样式。

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

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

我试过这种方法，它对我来说很好用。我在react模态标记中添加了一个简单的类

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

然后我去了app.css，这样选择

.modalStyle .modal-dialog

你想怎么做就怎么做

以防万一，您还需要根据您的环境处理不同的env文件，例如：.env.prod和.env.dev，然后执行以下操作：
1.确保.env.prod和.env.dev位于项目的根目录中。
1.在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,
  },
});