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

【问题标题】：Can Office Fabric DetailsList column headers be styled?Office Fabric DetailsList 列标题可以设置样式吗？
【发布时间】：2019-05-06 07:47:05
【问题描述】：

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

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

【问题讨论】：

标签： office-ui-fabric

【解决方案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>
    );
  }

Demo

【讨论】：

谢谢！这正是我一直在寻找的。您是否在任何地方找到有关如何执行此覆盖的文档？（只是想确保我没有在某个地方错过它。）
很高兴知道！关于文档，这里也一样，不知道这方面有什么特别之处，源代码是唯一可靠的方法来弄清楚..
对于读者来说，如果您可以获取列键来标识您的列，则在技术上可以按列呈现。这是在tooltipHostProps.id 中以listKey-columnKey-moreText 开头的格式公开的。假设 listKey 和 columnKey 不包含连字符，您可以解析 columnKey。
这种方法的问题在于它不会覆盖默认样式。例如，fontSize 是您无法覆盖的规则，因为它存在于标头默认样式中.. :(
我认为只有在较新版本中才会出现覆盖问题。 >7

【解决方案2】：

您可以使用 IDetailsColumnStyles 界面设置列标题的样式。

例子：

...

  const headerStyle: Partial<IDetailsColumnStyles> = {
    cellTitle: {
      color: "#c00"
    }
  }

  const columns: IColumn[] = [
    { styles: headerStyle, key: 'name', name: 'Name', fieldName: 'name', minWidth: 120 },

...

查看IDetailsColumnStyles的定义，看看可以设置什么样式。

【讨论】：

【解决方案3】：

IColumn 接口有一个名为headerClassName 的属性，可用于设置列标题的样式。示例：

/* CSS */
.headerClass > span {
    /* right aligned header should have padding */
    padding-right: 15px;
}

.headerClass span {
   /* bolder font */
   font-weight: 900;

   /* Right Align the column header */
   justify-content: flex-end;
   text-align: right;

   /* green color */
   color: green;

   /* background color */
   background: pink;
}

//JSX
const columns = [
  {
    key: 'column1',
    name: 'Name',
    fieldName: 'name',
    minWidth: 100,
    maxWidth: 200,
    isResizable: true,
    heaerClassName: 'headerClass',
  },
  {
    key: 'column2',
    name: 'Value',
    fieldName: 'value',
    minWidth: 100,
    maxWidth: 200,
    isResizable: true,
  },
];

<DetailsList
  items={items}
  columns={columns}
  setKey='set'
/>

Demo

【讨论】：