在React Bootstrap中将类分配给模态

Question

I am trying to style the React Bootstrap modal by assigning it classes via the docs here

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

However, it is not showing up as a valid class.

Flexbox, background-color, etc. do not seem to apply to any children of the Modal parent, which makes me think that either Modal disables any styling or I'm doing something incorrectly

Thank you!

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

render of ExampleModal looks like this

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>    
    );
  } 
}

Can anyone think of a way to style the contents of React Modal?

Answer 1

Just to elaborate on the comments a bit,

In your current implementation you are setting dialogClassName on the component responsible for rendering the <Modal /> component, rather than, as the docs say , on the <Modal /> component itself.

This means that you have access to this.props.dialogClassName inside <ExampleModal /> rather than <Modal /> which is where react-bootstrap expects it.

There's nothing wrong with passing down the className from a higher level component, in fact it's a pretty likely use case that you would want to be conditionally rendering some styles to your <Modal /> component. Just be sure that it gets the prop dialogClassName .

In your case you just need to pass it one more level down:

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

Then inside of the render method of <ExampleModal /> :

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

On a side note: the code samples in the react-bootstrap docs are actually editable in-browser. Which can definitely be pretty useful whenever you're looking to test out things like the optional props for the different components they offer.