Как скрыть количество от заголовка GroupedList в office-ui-fabric?

Question

Я просто хочу добиться такой функциональности, как Bootstrap, разборная с использованием GroupedList.

Я пытался скрыть количество заголовков, применяя styles реквизиты к GroupedList.Вот пример кода.

  private _overrideStyles() {
   return {
     root: [
      "ms-customRoot",
         {
           color: "red"
          }
      ],
      headerCount: ["ms-customHeader", { display: "none" }]
     };
 }

 render() {
  return (
   <div>
   <GroupedList
      items={this._items}
      selectionMode={SelectionMode.none}
      onRenderCell={this._onRenderCell}
      styles={this.overrideStyles.bind(this)}
      groups={[
        {
          count: 3,
          key: "test-group",
          name: "Test group",
          startIndex: 0
        }
      ]}
    />
  </div>
  )
 }

Класс "ms-customRoot" применяется к заголовку группы, но класс "ms-customHeader" не применяется к диапазону количества заголовков.

Answer 1

Количество заголовков можно скрыть, переопределив функцию рендеринга для заголовка через свойство GroupedList.groupProps:

<GroupedList
      groupProps={{
            onRenderHeader: this.onRenderHeader
      }}
      ...    
 />

, а затем указав headerCount пользовательский стиль, подобный этому:

private onRenderHeader(headerProps:IGroupDividerProps,defaultRender:IRenderFunction<IGroupHeaderProps>) {
    const headerCountStyle:IStyle = { display: 'none' };
    return (
      <span>
          {defaultRender({...headerProps, styles: {headerCount: headerCountStyle}})}
      </span>
    );
}

Вот демо для вашей справки