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

Question

我在这个 UI 中使用 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 数组，您将行 ID 放在 onTreeExpandChange 事件中。