如何更改子单元格的单元格背景颜色

Question

我为此界面使用material-table。

仅在onTreeExpandChange为true时，我才尝试自定义特定单元格的样式。

因此，基本上，我只想为2和3单元格设置不同的背景颜色。这将帮助我仅识别子列标题。

一些代码示例：

                  {
                        title: 'WEST',
                         field: 'west',
                        cellStyle: { textAlign: 'center' },
                        headerStyle: { backgroundColor: '#006EB8' }
                    },
                ]}
                data={[
                    { id: 1, group_name: '1', northeast: 'Baran', central: 'ddd', west: '3' },
                    { id: 2, parentId: 1, group_name: '2', northeast: 'Baran', central: 'ddd', west: '3' },
                    { id: 3, parentId: 1, group_name: '3', northeast: 'Baran', central: 'ddd', west: '3' },
                    { id: 4, group_name: '4', northeast: 'Baran', central: 'ddd', west: '3' },
                    { id: 5, group_name: '5', northeast: 'Baran', central: 'ddd', west: '3' },
                    { id: 6, group_name: '6', northeast: 'Baran', central: 'ddd', west: '3' },
                ]}
                onTreeExpandChange={(row, rows) => {
                    if (rows) {
                        // How to changne the backgroundColor of cell 2 & 3 ?????
                    }
                }
                }
                parentChildData={(row, rows) => rows.find(a => a.id === row.parentId)}
                options={{
                    search: false,
                    sorting: true,
                    exportButton: true,
                    paging: false,

有什么想法可以做到吗？

谢谢

Answer 1

似乎只能在React组件的options属性中使用行样式，因此在每次向该状态添加行ID时，您都必须保持向下状态。

类似这样的东西：

options={{
  rowStyle: rowData => ({
    backgroundColor: (this.state.expandedRow && this.state.expandedRow.indexOf(rowData.id) != -1) ? '#FF0' : '#FFF'
  })
}}

然后在状态this.state.expandedRow上放置一个onTreeExpandChange数组。