react-bootstrap: реквизит диалогового окна ModalClassName не работает

Я использую реквизит dialogClassName, чтобы изменить ширину модального окна на 90%. CSS ничего не меняет. Я убедился, что style.css отлично работает для всех остальных классов.

Решение в этом вопросе SO не т работать. документация также не работает.

Я ценю вашу помощь!

Метод рендеринга modal.js:

render(){
    return (
        <div>
            <CardMain openModal={this.handleOpen}
                                {...this.props} />
            <Modal show={this.state.open}
                   onHide={this.handleClose}
                   dialogClassName="main-modal">
                <ModalMain tabKey={this.state.tabKey}
                                  {...this.props} />
                <FeedbackForm />
            </Modal>
        </div>
    );
}

style.css:

.main-modal {
    width: 90%;
}

reactjs css react-bootstrap
person Community    schedule 07.04.2016    source источник
comment
Вы проверили элемент и проверили, почему он не применяется?? Возможно, у вас есть другие правила CSS, которые имеют больший приоритет, чем это.   -  person Rajshekar Reddy    schedule 07.04.2016
comment
Спасибо за предложение. Оказывается, класс для этого тега — это main-modal modal-dialog. Таким образом, модальный диалог должен переопределять его. Это встроенный модальный класс react-bootstrap. Любая идея, как переопределить это?   -  person    schedule 07.04.2016
comment
вы можете писать встроенные стили CSS. Он будет иметь более высокий приоритет, чем правила начальной загрузки. В противном случае вы можете указать правило на своем сайте. CSS, используя идентификатор вашего модального окна. Правила CSS с селекторами идентификаторов имеют больший приоритет. Или вы можете добавить собственный класс и написать свое правило CSS со всеми возможными селекторами классов. Когда количество классов, используемых в селекторах, велико, он получает больший приоритет... Используйте тот, который подходит вам лучше всего.   -  person Rajshekar Reddy    schedule 07.04.2016
comment
Я протестировал следующие решения: встроенный CSS: я написал css-объект modalStyle и установил dialogClassName={modalStyle}. Это ничего не изменило. id: ‹Modal id=main-modal› не работает, потому что dialogClassName устанавливает класс для некоторого скрытого диалогового тега, а не для самого модального окна. много селекторов классов: я добавил 8 других селекторов классов в .main-modal, но это ничего не изменило. Я неправильно реализую ваши предложения?   -  person    schedule 07.04.2016
comment
Встроенный CSS означает установку атрибута стиля вашего элемента... Вот так stlye=width:90%;   -  person Rajshekar Reddy    schedule 08.04.2016

Ответы (4)


arrow_upward
7
arrow_downward

Пытаться

.main-modal {
    min-width: 90%;
}

вместо.

person Pablo Darde    schedule 21.11.2019

arrow_upward
0
arrow_downward

Согласно исходному коду dialogClassName используется для установки className для диалогового компонента. Вы можете передать свойство dialogComponent модальному компоненту.

You can read description of dialogComponent in the next row to dialogComponentClass in the Modal docs.

person gyzerok    schedule 07.04.2016
comment
Это решение требует, чтобы я переопределил каждую поддержку css модального окна с нуля. Согласно примеру dialogClassName в документации, я должен иметь возможность просто переопределить реквизиты спецификации, такие как ширина. - person ; 07.04.2016
comment
Как вы можете видеть в модальном рендеринге (github. com/react-bootstrap/react-bootstrap/blob/master/src/) это свойство передается только диалоговому окну, полученному из свойства dialogComponent (github.com/react-bootstrap/react-bootstrap/blob/master/src/). - person gyzerok; 07.04.2016
comment
Я вижу вашу точку зрения. Однако, когда я реализую, я получаю модальное окно, в котором нет ни одного из css, включенного в модальное приложение react-bootstrap. Поэтому мне нужно было бы переопределить все, что нежелательно. Использование dialogComponent не является хорошей заменой для dialogClassName. - person ; 07.04.2016
comment
Извините, похоже, единственное решение с dialogClassName - person gyzerok; 08.04.2016

arrow_upward
0
arrow_downward

Похоже, что BS автоматически определяет свой класс для компонента Modal.Dialog как .modal-dialog. Доступ к этому через цепочку CSS сработал для меня без необходимости переопределять все стандартные атрибуты CSS BS:

Определите id для тега <Modal>, например. <Modal id="main-modal">

Затем определите тег привязки CSS как #main-modal .modal-dialog {width: 90%;}

Надеюсь, это поможет!

person Malcolm Burtenshaw    schedule 13.05.2020

arrow_upward
0
arrow_downward

Я столкнулся с той же проблемой и обнаружил, что это работает.

Мой CSS:

.modal-80w {
  min-width:80%;
}

JSX:

  <div className="modal-80w">
    <Modal
      show={props.show}
      onHide={resetRatingsAndToggle}
      dialogClassName="modal-80w"
      >

    <!--MODAL CONTENT HERE -->

    </Modal>
  </div>

Кажется, что вам нужно className для обертывания DIV, а также dialogClassName, оба установлены для селектора класса, определенного в вашем файле css.

person OptimusPrime    schedule 20.03.2021