Question

我正在使用来自here的React的bootstrap的Modal组件，我可以使用以下代码轻松实现Modal，

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，所以我做了dialogClassName="custom-map-modal"其中

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

上述情况也不起作用。

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

Answer 1

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

看看这个例子： 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;
 }
}

React - 带Bootstrap的全屏模态

1 个答案: