如何让列 header 包含在 react-virtualized 中？

Question

我有一个 react-virtualized Table 和一些冗长的列 headers，我希望 headers 列换行而不是用省略号结尾。有人知道如何做到这一点吗？

作为参考，这里有一些示例代码：

makeTable = <AutoSizer>
    {({ width, height }) => (
        <Table ref={this.setTableRef.bind(this)}
            width={width}
            height={height}
            headerHeight={20}
            rowHeight={this._rowHeight.bind(this)}
            rowCount={this.props.reportRows.length}
            rowGetter={this._rowGetter.bind(this)}
            rowClassName={this._rowClassName.bind(this)}
        >
            <Column
                label='Super Long Column Header Name of Longness'
                dataKey='testCase'
                width={150}
                flexGrow={1}
                cellRenderer={this._testCaseCellRenderer.bind(this)}

            />

[truncated the code above]

如您所见，我需要换行的是 label，但我应用的任何样式都不起作用，无论是 Column 还是 css。帮助？谢谢！

Answer 1

我假设您包含了 react-virtualized 中指定的样式？对于上下文，应用样式的是 this line in their stylesheet.

看起来类名是 hard injected when loading default render so you have to either override this style with your own style that is of the same name, define your own style that somehow can apply a style to this element with a higher CSS specificity or, overkill, define your own headerRenderer which Column provides a way to do。

仅供参考——当然 react-virtualized 以某种方式包含很多组件，响应方面也是如此。我建议通过 Chrome 开发工具中的 CSS 在他们的 playground 中试一试，这样如果删除包装的行为符合预期但没有，您可以看到您可能需要更改的内容.

如何让列 header 包含在 react-virtualized 中？

How can I get a column header to wrap in react-virtualized?

react-virtualized