blueprint.js dateinput在对话框模式中无法正确显示

Question

我在我的react项目中使用blueprintjs，并尝试在我的对话框模式中使用dateinput。当我单击日期输入字段时，日历显示在错误的位置，并且黑色箭头很大。我正在导入css文件。 CSS：

@import "~@blueprintjs/datetime/src/blueprint-datetime.scss";

组件：

 const jsDateFormatter: IDateFormatProps = {
        formatDate: date => date!.toLocaleDateString(),
        parseDate: str => new Date(str),
        placeholder: 'MM/DD/YYYY',
    };

<Dialog title="Add New Rate" isOpen={this.props.isAddRateDialogShowing} onClose={this.hideDialog}>
            <div style={{marginLeft: '10%', marginRight: '10%', marginTop: '3%'}}>
                <label>New Bill Rate</label>
                <InputGroup leftIcon="dollar"/>
                <br />
                <label>New Pay Rate</label>
                <InputGroup leftIcon="dollar"/>
                <br />
                <label>New Effective Date</label>
                <DateInput {...jsDateFormatter} />
                <div style={{marginLeft: '25%', marginRight: '25%'}}>
                    <button className="pt-button pt-intent-primary" style={{margin: '10px'}}>Save</button>
                    <button className="pt-button pt-intent-primary" style={{margin: '10px'}} onClick={this.hideDialog}>Cancel</button>
                </div>
            </div>
        </Dialog>

希望从图片中可以看到，日期选择器的位置太远了，在前景中，应该指向输入框的箭头偏斜并且位置错误。