response- bootstrap -sweetalert предупреждение не появляется в центре экрана

Question

Я пытаюсь создать приятное всплывающее окно с предупреждением на моем экране, когда я нажимаю кнопку, которая отображается, но в правом нижнем углу экрана. Я хочу, чтобы он был в центре содержащегося в нем div. Я попытался сделать это внутри сетки bootstrap и отцентрировать. Но похоже, что это не работает. Вот скриншот. Here's my code.

import React, { Component } from 'react';
import SweetAlert from 'react-bootstrap-sweetalert';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Row, Col, Grid } from 'react-bootstrap';

class Test extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showAlert:null,
        }
    }
  render() {
    return (
    
         this.alertShow()}>Click Me!
        
            
                 {this.state.showAlert}     ); } hideAlert = () => {this.setState ({showAlert: null}); } alertShow = () => {this.setState ({showAlert: {"Являются this.hideAlert ()} onCancel = {() => this.hideAlert ()} focusCancelBtn> Детали сообщения также будут удалены! }); }} экспорт теста по умолчанию; 

Answer 1

Я нашел способ решения этой проблемы. Я вручную установил свойство стиля <SweetAlert>, чтобы центрировать элемент.

Вот мой обновленный код для <SweetAlert>.

<SweetAlert
        warning
        showCancel
        confirmBtnText="Yes, delete it!"
        confirmBtnBsStyle="danger"
        cancelBtnBsStyle="success"
        title={"Are you sure to delete ?"}
        onConfirm={() => this.hideAlert()}
        onCancel={() => this.hideAlert()}
        focusCancelBtn
        style={{right:"0",left:"0",top:"0",bottom:"0",marginRight:"auto",marginLeft:"auto",marginTop:"auto",marginBottom:"auto"}}
    >
        Message details also will be deleted!
</SweetAlert>

Спасибо!