如何更改 React-Data-Grid 中 HeaderCell 的高度？

Question

Here 是 CodeSandbox 中的基本网格。当我定义我的 columns object 时，我在属性 headerRenderer 中传递的其中一列是一个简单的 React 组件，显示一些文本和红色背景。我将此组件的高度设置为 100，以便扩展 header 单元格。那没有用。

我进入 Chrome 开发工具并尝试更改各种 parent 元素的一堆 css 属性，但无济于事： [=30= 的显示高度] 始终为 35px。

通知中link我还定义了override.css也就是专门定义了.react-grid-HeaderCellclass.

的高度

我错过了什么，这个 Header 的高度不会改变？

Answer 1

道具名称 headerRowHeight 可以用来设置 header 单元格的高度。在您的示例中，它将是

<ReactDataGrid
          columns={columns}
          rowGetter={i => this.state.rows[i]}
          rowsCount={3}
          onGridRowsUpdated={this.onGridRowsUpdated}
          enableCellSelect={true}
          headerRowHeight={50}
        />

如何更改 React-Data-Grid 中 HeaderCell 的高度？

How do I change the height of the HeaderCell in React-Data-Grid?

reactjs

react-data-grid