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

Question

我有一个 react-virtualized Table 带有一些冗长的列标题，并且希望列标题换行而不是用省略号拖尾。有谁知道如何做到这一点？

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

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。

看起来 className 是 hard injected when loading default render 所以你必须用你自己的同名样式覆盖这个样式，定义你自己的样式，以某种方式可以将样式应用到这个具有更高 CSS 特异性的元素，或者，矫枉过正，定义你自己的headerRenderer which Column provides a way to do。

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