阵营 - 全屏模态与引导

Question

我使用的引导模态分量从here反应过来，就可以使用下面的代码轻松实现莫代尔，

import React, {Component} from 'react'; 
import {BaseComponent} from 'BaseComponent'; 
import { Modal, Button } from 'react-bootstrap'; 

class InteractiveMap extends BaseComponent { 
    constructor(props) { 
    super(props); 
    this.open = this.open.bind(this); 
    this.close = this.close.bind(this); 
    this.state = {showModal: false}; 
    } 

    open() { 
    this.setState({showModal: true}); 
    } 

    close() { 
    this.setState({showModal: false}); 
    } 

    onFormSubmit(values){ 
    const data = {...values}; 

    } 

    render() { 

    return(
     <div> 
     <div className="map-menuitem" onClick={this.open}>Interactive Map</div> 
     <div> 
      <Modal className="modal-container" 
      show={this.state.showModal} 
      onHide={this.close} 
      animation={true} 
      dialogClassName="custom-map-modal" 
      > 
      <Modal.Header closeButton> 
       <Modal.Title>Interactive Map</Modal.Title> 
      </Modal.Header> 

      <Modal.Body> 
       The body 
      </Modal.Body> 
      <Modal.Footer> 
       <Button className="button-theme" onClick={this.close}>Close</Button> 
       <Button className="button-theme button-theme-blue" type="submit">Save changes</Button> 
      </Modal.Footer> 

      </Modal> 
     </div> 
     </div> 
    ); 
    } 
} 

export default InteractiveMap; 

在它被写，我可以提供我的自定义的文档css为Modal，所以我做了dialogClassName="custom-map-modal"其中

.custom-map-modal{ 
    width:100%; 
} 

以上都不行。

我想在这里实现全屏模态，我该如何实现使用上述方法，或者如果有其他方法可以做，但我只想使用Bootstrap。

Answer 1

将CSS类放置在JSX用于将CSS属性分配给组件的属性“className”中。

看看这个例子： https://www.webpackbin.com/bins/-Kn1AnYrAFxOONefi_4N

<Modal className="modal-container custom-map-modal" 
     show={this.state.showModal} 
     onHide={this.toggleState} 
     animation={true} 
     > 

SASS实施

.custom-map-modal { 
    .modal-dialog { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    } 
    .modal-content { 
    height: auto; 
    min-height: 100%; 
    border-radius: 0; 
} 
}