reactjs - 应用样式会扭曲 React Callout 组件

Question

我有一个带有标注组件的反应应用程序，如果我不对其应用任何样式，它看起来非常正常。它的指针完美地指向一个过滤器按钮

但是，当我尝试隐藏它（应用 display:none 到它）并取消隐藏它时，标注回来扭曲，指针被撕掉

有人可以建议如何解决这种失真吗？

非常感谢您！

            <SearchBox placeholder="Search for an Event" styles={searchBoxStyles}
                        onSearch={newValue => console.log('value is ' + newValue)} 
                        className="searchBoxWithButton" />
                    <div className={contentStyles.buttonArea}>
                       <IconButton iconProps={filterIcon} className="eventsFilterButton"
                           onClick={this.ChangeLS}/>
                    </div>

                    <div className="hidden">
                        <Callout 
                        ariaLabelledBy={labelId}
                        ariaDescribedBy={descriptionId}
                        role="alertdialog"
                        gapSpace={0}
                        target={`.eventsFilterButton`}
                        onDismiss={this.ChangeLS}
                        id="mycallout"
                        setInitialFocus
                        className="hidden"
                        >
                        <table className="smallfont">
                        <tr>
                        <td className="left">
                            <div className="bold">Date Rannge</div>
                        </td>
                        <td>
                        </td>
                        </tr>
                        <tr>
                        <td>
                        <DatePicker
                                className={contentStyles.control}
                                firstDayOfWeek={DayOfWeek.Sunday}
                                strings={DayPickerStrings}
                                disableAutoFocus={true}
                                placeholder="Select a date..."
                                ariaLabel="Select a date"
                            />
                        </td>
                        <td>
                        <DatePicker
                                className={contentStyles.control}
                                firstDayOfWeek={DayOfWeek.Sunday}
                                strings={DayPickerStrings}
                                disableAutoFocus={true}
                                placeholder="Select a date..."
                                ariaLabel="Select a date"
                            />                      
                        </td>              
                        </tr>
                        <tr>
                            <td className="left"><div className="bold">Event Type</div></td>
                            <td className="left"><div className="bold">Event Subtype</div></td>
                        </tr>
                        <tr>
                            <td><Checkbox label="Event type option" defaultChecked className="smallfont"/></td>
                            <td><Checkbox label="Event type option" className="smallfont"/></td>
                        </tr>
                        <tr>
                            <td><Checkbox label="Event type option" className="smallfont"/></td>
                            <td><Checkbox label="Event type option" defaultChecked className="smallfont"/></td>
                        </tr> 
                        <tr><td></td><td></td></tr>                 
                        <tr>
                            <td className="left"><div className="bold">Event Status</div></td>
                            <td></td>
                        </tr>                
                        <tr>
                            <td><Checkbox label="Draft" className="smallfont"/></td>
                            <td><Checkbox label="Rejected" className="smallfont"/></td>
                        </tr> 
                        <tr>
                            <td><Checkbox label="Submitted for approval" className="smallfont"/></td>
                            <td><Checkbox label="Canceled"  className="smallfont"/></td>
                        </tr>
                        <tr>
                            <td><Checkbox label="Resumed for revision" className="smallfont"/></td>
                            <td><Checkbox label="Closed" defaultChecked className="smallfont"/></td>
                        </tr>
                        <tr>
                            <td><Checkbox label="Approved" className="smallfont"/></td>
                            <td></td>
                        </tr>                                                         
                        </table>
                        </Callout>
                </div>

隐藏样式简单的地方显示：无