React Panel组件样式报错TS2322：类型不兼容如何修复？

你遇到的这个TS类型错误，是因为Panel组件的styles属性结构不符合IPanelStyles的定义。

错误原因 #

你把closeButton的样式嵌套在了root对象里，但在Fluent UI的IPanelStyles接口中，closeButton是和root同级的独立样式属性，并非root的子属性，所以类型检查不通过。

修复代码 #

将styles的结构调整为正确的层级：

<Panel
    isOpen={this.state.showPanel}
    onDismiss={this.onPanelClose}
    type={PanelType.medium}
    hasCloseButton={true}
    closeButtonAriaLabel="Close Submission Details"
    headerText={escape(strings.ListSubmissionsStatusPanelHeader)}
    isFooterAtBottom={true}
    onRenderFooterContent={this.renderFooter}
    styles={{ closeButton: { margin: '2px' } }}
>

如果需要同时设置root的样式，可以这样写：

styles={{
    root: { /* 这里写root的样式 */ },
    closeButton: { margin: '2px' }
}}

调整后，样式结构就符合IStyleFunctionOrObject<IPanelStyleProps, IPanelStyles>的类型要求，TS错误会消失。

内容的提问来源于stack exchange，提问作者user989988