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

然后，您可以像访问任何对象一样访问样式，并将它们应用于样式属性

上的组件。

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

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

2 个答案: