Модальные стили в React - PullRequest
Новая
       17

Модальные стили в React

1 голос
/ 03 марта 2020

Я делаю несколько отдельных страниц, каждая из которых содержит модальные (или две). Я сделал css лист для укладки, чтобы сделать ТОЛЬКО ОДИН из этих полноэкранных. Я бы хотел, чтобы остальные остались прежнего размера.

Однако это затронуло все мои модалы, а не только один.

Моим первым способом действий было удалить этот модал (и лист css) из папки, в которой он находился, в надежде, что таблица стилей css больше не будет влиять на другие модалы, теперь она находится вне папки. Это не сработало.

Так что, по сути, я чувствую, что встроенное моделирование в данном случае - лучший способ действий. Однако я не уверен, как выполнить стилизацию для этого конкретного c модального.

Я здесь прошу любого совета о том, как решить проблему листа стилей или как сделать это с помощью встроенных стилей.

Вот моя структура папок, поскольку вы можете видеть, что adminviewWorkstatioModal находится в отдельной папке вместе с viewWorkstationModal. css Однако стиль этого по-прежнему влияет на остальные файлы на рисунке.

enter image description here

Пример одного из модалов (только шаблон) 


class DisplayAddQuestion extends React.Component {
  constructor(props) {
    super(props);

    this.handleClose = this.handleClose.bind(this);
    this.handleShow = this.handleShow.bind(this);

    this.handleRefresh = this.handleRefresh.bind(this);

    this.state = {
      show: false,
      show1: false
    };
  }

  handleClose() {
    this.setState({
      show: false,
      show1: false
    });
  }

  handleShow() {
    this.setState({
      show: true
    });
  }

  handleRefresh() {
    window.location.reload();
  }

  render() {
    // console.log(this.state);

    return (
      <div className="header-container">
        <button
          className="btn btn-primary"
          style={{ float: "right" }}
          onClick={this.handleShow}
        >
          +
        </button>

        <Modal
          className="modal-container custom-map-modal"
          show={this.state.show}
          onHide={this.handleClose}
          animation={true}
        >
           <Modal.Header closeButton></Modal.Header>
          <Modal.Body></Modal.Body> 
        </Modal>
      </div>
    );
  }
}

И, наконец, лист css 

.modal-dialog {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

.modal-content {
  height: auto !important;
  min-height: 100% !important;
  border-radius: 0 !important;
  background-color: #ececec !important;
}

.modal-header {
  border-bottom: 1px solid #9ea2a2 !important;
}

.modal-footer {
  border-top: 1px solid #9ea2a2 !important;
}

Заранее спасибо !!

...