MessageBar的关闭图标位于messagebarbutton的左侧

Question

我正在使用OfficeUI架构和React中的消息栏，其中我根据道具来渲染消息栏类型，按钮文本和操作以及消息栏字符串。

            <MessageBar
                messageBarType={this.props.messageType}
                isMultiline={this.props.isMultiline}
                actions={
                    <div>
                        {this.props.buttonProps && <MessageBarButton onClick={this.props.buttonProps.btnAction}>{this.props.buttonProps.btnText}</MessageBarButton>}                            
                    </div>
                }
                onDismiss={console.log("Test")}
                dismissButtonAriaLabel="Close"
            >
                {this.props.messageString}
            </MessageBar>

如果我没有通过按钮的道具，那就很好了。但是当我通过按钮道具时，我的解散图标显示在按钮的左侧。

您能告诉我我在做什么错吗？