Office Fabric DetailsList 列标题可以设置样式吗？

Question

我正在查看 Office Fabric 文档，似乎有关于如何设置详细信息列表中的项目/内容样式的明确信息（https://developer.microsoft.com/en-us/fabric#/components/detailslist/customitemcolumns有一个示例），但没有有关如何设置列标题样式的信息（或者是否可能）。

这似乎是一个非常常见的用例（我试图将我的列标题居中，而不是让它们左对齐并使它们更大），所以不确定我是否遗漏了一些东西？

Answer 1

自定义列标题的一种选择是通过事件覆盖标题的呈现onRenderDetailsHeader，然后使用自定义样式呈现标题工具提示，如下所示

<DetailsList
    items={sortedItems as any[]}
    setKey="set"
    columns={columns}
    onRenderDetailsHeader={this.renderDetailsHeader}
  />


private renderDetailsHeader(detailsHeaderProps: IDetailsHeaderProps) {
    return (
      <DetailsHeader
        {...detailsHeaderProps}
        onRenderColumnHeaderTooltip={this.renderCustomHeaderTooltip}
      />
    );
  }

  private renderCustomHeaderTooltip(tooltipHostProps: ITooltipHostProps) {
    return (
      <span
        style={{
          display: "flex",
          fontFamily: "Tahoma",
          fontSize: "14px",
          justifyContent: "center",
        }}
      >
        {tooltipHostProps.children}
      </span>
    );
  }

演示