在React-Data-Grid中对行进行分组时，如何设置分组行的样式？

Question

是否可以为您在所附屏幕截图中看到的分组行设置样式？我想做的是提供一个React组件来代替它。

Here是所附屏幕截图的代码和框。

该屏幕快照显示，代表该分组行的div的类是react-grid-row-group，并且它在React-Data-Grid代码库中出现的唯一位置是在RowGroup.tsx中。

const RowGroup = forwardRef<HTMLDivElement, Props>(function RowGroup(props, ref) {
  function onRowExpandToggle(expand?: boolean) {
    const { onRowExpandToggle } = props.cellMetaData;
    if (onRowExpandToggle) {
      const shouldExpand = expand == null ? !props.isExpanded : expand;
      onRowExpandToggle({ rowIdx: props.idx, shouldExpand, columnGroupName: props.columnGroupName, name: props.name });
    }
  }

  function onRowExpandClick() {
    onRowExpandToggle(!props.isExpanded);
  }

  function onClick() {
    props.eventBus.dispatch(EventTypes.SELECT_CELL, { rowIdx: props.idx, idx: 0 });
  }

  const lastColumn = props.columns[props.columns.length - 1];
  const style = { width: lastColumn!.left + lastColumn!.width };
  const Renderer = props.renderer || DefaultBase;

  return (
    <div className="react-grid-row-group" style={style} onClick={onClick}>
      <Renderer {...props} ref={ref} onRowExpandClick={onRowExpandClick} onRowExpandToggle={onRowExpandToggle} />
    </div>
  );
});

export default RowGroup;

因此，如果该组件收到一个renderer道具，它将使用它来呈现具有上述类名的div下的组行。

RowGroup.tsx的用法基本上在Canvas.tsx中，并且Canvas实例化RowGroup的{​​{1}}道具为renderer。画布以this.props.rowGroupRenderer呈现。视口以Viewport.tsx呈现，而网格以Grid.tsx呈现。

Answer 1

在docs for React-Data-Grid中，我们看到道具rowGroupRenderer描述为

rowGroupRenderer
Function called whenever keyboard key is pressed down

type: func

但是，正如上面问题中所描述的那样，通过查看代码，我们可以看到该道具还可以控制当您有一个组时行的外观。

但是，还有一个问题是，为什么ReactDataGrid的道具的TypeScript类型定义中没有该道具？