切换模式会增加不必要的填充（reactstrap）

Question

我正在使用reactstrap，我有两个模态。
在每个模式中，都有一个按钮可以“切换”到另一个模式。
它工作正常，但有一个小问题：切换到其他模式然后关闭，会导致在身体上生成不需要的填充（特别是padding-right：17px）标签

是什么原因引起的？

相关代码如下：

class App extends Component {

    state = {
        registerModal: true,
        loginModal: false
    };

    render() {
        return (
            <React.Fragment>
                    <RegisterModal toggleRegisterModal={this.toggleRegisterModal} registerModal={this.state.registerModal} />
                    <LoginModal toggleLoginModal={this.toggleLoginModal} loginModal={this.state.loginModal} />
            </React.Fragment>
        );
    }

    toggleRegisterModal = (toggleToLogin = false) => (e) => {
        if (toggleToLogin === false) {
            this.state.registerModal === true ? this.setState({ registerModal: false }) : this.setState({ registerModal: true });
        } else {
            this.setState({ registerModal: false, loginModal: true });
        }
    }

    toggleLoginModal = (toggleToRegister = false) => (e) => {

        if (toggleToRegister === false) {
            this.state.loginModal === true ? this.setState({ loginModal: false }) : this.setState({ loginModal: true });
        } else {
            this.setState({ loginModal: false, registerModal: true });
        }

    }   
}

模式代码：（请注意：与LoginModal非常相似的代码）

import React, { Component } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

export default class RegisterModal extends Component {
    render() {
        return (
            <Modal isOpen={this.props.registerModal} toggle={this.props.toggleRegisterModal()}>
                <ModalHeader toggle={this.props.toggleRegisterModal()}>Modal title</ModalHeader>
                <ModalBody>
                    <span>Register</span>
                    <Button onClick={this.props.toggleRegisterModal(true)}>Switch to Login</Button>
                </ModalBody>
                <ModalFooter>
                    <Button color="primary" onClick={this.props.toggleRegisterModal()}>Do Something</Button>{' '}
                    <Button color="secondary" onClick={this.props.toggleRegisterModal()}>Cancel</Button>
                </ModalFooter>
            </Modal>
        );
    }
}