Назначьте классы модальным окнам в React Bootstrap

Я пытаюсь стилизовать модальное окно React Bootstrap, назначая ему классы через документы здесь.

prop: dialogClassName   
type: string
description: A css class to apply to the Modal dialog DOM node.

Однако он не отображается как допустимый класс.

Flexbox, background-color и т. д., похоже, не применяются ни к каким дочерним элементам родителя Modal, что заставляет меня думать, что либо Modal отключает любые стили, либо я делаю что-то неправильно.

Благодарю вас!

<ExampleModal 
     dialogClassName="planModal" <--Tried here
     modalState={this.props.modalState}
     openModal={this.props.actions.openModal}
     mealPlanArray={this.props.mealPlanArray}/>

визуализация ExampleModal выглядит так

render() {                
    if (!this.props.modalState.openDisplay) { return ( <span/>) }
      return (
       <Modal className="TriedHere" show={this.props.modalState.openDisplay} onHide={this.props.openModal}>        
        <Modal.Header>            
          <h2>Bot Activated</h2>
        </Modal.Header>
        <Modal.Body>            
          {this.renderResults()}
        </Modal.Body>
      </Modal>    
    );
  } 
}

Кто-нибудь может придумать способ стилизовать содержимое React Modal?


reactjs css bootstrap-modal react-bootstrap
person Anthony Chung    schedule 19.05.2016    source источник
comment
Поставить опору dialogClassName на <Modal ..?   -  person azium    schedule 19.05.2016
comment
Как говорит azium, это поддержка компонента <Modal />, если вы хотите передать его из родительского компонента, то в этом случае у вас будет: <Modal dialogClassName={this.props.dialogClassName} ... />   -  person Brad Colthurst    schedule 19.05.2016

Ответы (1)


arrow_upward
3
arrow_downward

Просто чтобы немного уточнить комментарии,

В вашей текущей реализации вы устанавливаете dialogClassName для компонента, отвечающего за рендеринг компонента <Modal />, а не как говорится в документации, на самом компоненте <Modal />.

Это означает, что у вас есть доступ к this.props.dialogClassName внутри <ExampleModal />, а не <Modal />, где этого ожидает react-bootstrap.

Нет ничего плохого в передаче className из компонента более высокого уровня, на самом деле это довольно вероятный вариант использования, когда вы захотите условно отображать некоторые стили для вашего компонента <Modal />. Просто убедитесь, что он получает реквизит dialogClassName.

В вашем случае вам просто нужно пройти еще один уровень вниз:

<ExampleModal 
 dialogClassName="planModal"  <-- This is a custom prop that you have created, 
 ...                              it's been given the same name, but the name 
 ...                              could be anything really.
 ... 
/>

Затем внутри метода рендеринга <ExampleModal />:

<Modal 
  dialogClassName={this.props.dialogClassName}  <-- This is the prop that react-boostrap expects 
  show={this.props.modalState.openDisplay} 
  onHide={this.props.openModal}>

На заметку: примеры кода в документах react-bootstrap на самом деле редактируются в браузере. Что, безусловно, может быть очень полезно, когда вы хотите протестировать такие вещи, как дополнительные реквизиты для различных компонентов, которые они предлагают.

person Brad Colthurst    schedule 19.05.2016
comment
Эй, Брэд! Спасибо за ответы. Я также попытался разместить опору там (под ModalComponent, но я все еще не мог применить какой-либо стиль. Есть идеи, почему это должно быть? - person Anthony Chung; 20.05.2016
comment
Вы дважды проверили, добавляет ли класс в div modal-dialog в devTools? Это определенно должно быть, может быть, проблема с фактическими стилями? - person Brad Colthurst; 20.05.2016