在 React Bootstrap 中为模态分配类

Question

我正在尝试通过此处的文档为其分配类来设置 React Bootstrap 模式的样式

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

但是，它没有显示为有效的类。

Flexbox、背景色等似乎不适用于 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 内容的样式？

Answer 1

稍微详细说明一下cmets，

在您当前的实现中，您在负责渲染<Modal /> 组件的组件上设置dialogClassName，而不是在<Modal /> 组件本身上设置as the docs say。

这意味着您可以访问 this.props.dialogClassName 内的 <ExampleModal /> 而不是 <Modal /> 这是 react-bootstrap 所期望的。

从更高级别的组件传递 className 并没有错，事实上，您很可能希望有条件地将某些样式呈现给您的 <Modal /> 组件。只要确保它得到了 dialogClassName 的 props。

在你的情况下，你只需要再向下传递一个级别：

<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 />的render方法里面：

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

附带说明：react-bootstrap 文档中的代码示例实际上是可在浏览器中编辑的。每当您想要测试它们提供的不同组件的可选道具之类的东西时，这绝对是非常有用的。