Fluent UI中ScrollablePane嵌套DetailsList引发TypeScript错误求解决

我在使用Fluent UI开发时，为实现DetailsList组件的表头固定效果，引入ScrollablePane组件后出现了TypeScript类型错误，相关代码及错误截图如下：

<ScrollablePane
  scrollbarVisibility={ScrollbarVisibility.auto}
  styles={{
    root: {
      selectors: {
        '.ms-ScrollablePane--contentContainer': {
          scrollbarWidth: 6,
        },
        '.ms-ScrollablePane--contentContainer::-webkit-scrollbar': {
          width: 6,
          height: 6,
        },
      },
    },
  }}
>
  <DetailsList
    items={elements}
    columns={columns}
    selectionMode={SelectionMode.none}
    setKey="none"
    onColumnHeaderClick={() => setPreventSortIconOnRender(false)}
    layoutMode={DetailsListLayoutMode.justified}
    isHeaderVisible={true}
    onRenderDetailsHeader={(headerProps, defaultRender) => {
      return (
        <Sticky
          stickyPosition={StickyPositionType.Header}
          isScrollSynced={true}
          stickyBackgroundColor="transparent"
        >
          {defaultRender &&
            defaultRender({
              ...headerProps,
              styles: {
                root: {
                  selectors: {
                    '.ms-DetailsHeader-cellName': {
                      fontWeight: 'normal',
                      fontSize: 'var(--font-size-0)',
                    },
                  },
                },
              },
            })}
        </Sticky>
      );
    }}
  />
</ScrollablePane>

修复方案 #

方案1：修正onRenderDetailsHeader中的样式类型错误

错误大概率来自defaultRender参数的样式合并时的类型不兼容。headerProps.styles属于IDetailsHeaderStyles类型，扩展时需要明确类型：

onRenderDetailsHeader={(headerProps, defaultRender) => {
  return (
    <Sticky
      stickyPosition={StickyPositionType.Header}
      isScrollSynced={true}
      stickyBackgroundColor="transparent"
    >
      {defaultRender &&
        defaultRender({
          ...headerProps,
          styles: {
            ...headerProps.styles,
            root: {
              selectors: {
                '.ms-DetailsHeader-cellName': {
                  fontWeight: 'normal',
                  fontSize: 'var(--font-size-0)',
                },
              },
            },
          } as Partial<IDetailsHeaderStyles>,
        })}
    </Sticky>
  );
}}

方案2：给ScrollablePane的子元素添加类型断言

如果是ScrollablePane对children类型的校验导致错误，直接给DetailsList添加类型断言：

<ScrollablePane
  scrollbarVisibility={ScrollbarVisibility.auto}
  styles={{ /* 原有样式 */ }}
>
  {<DetailsList /* 原有属性 */ /> as React.ReactNode}
</ScrollablePane>

方案3：替换ScrollablePane为原生滚动容器

避免组件间的类型兼容问题，直接用原生div实现滚动，Sticky组件会自动监听父容器的滚动事件：

<div style={{ height: 'calc(100vh - 120px)', overflow: 'auto' }}>
  <DetailsList /* 原有属性 */ />
</div>

这个方案最简洁，同时完全满足表头固定+内容滚动的需求，推荐优先尝试。

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