React 材料表：数据树中的颜色行

Question

我在我的 React 项目中使用材料表。我有 3 层数据树。这是第一个：

当我单击数据树表中第一层的 2 个项目中的第一个时，是否可以对其进行着色，以便更容易看到其下的值是子元素。像这样：

另外，如果我在向它传递数据时可以给它着色，我会更高兴。这是我传递数据的方式：

data={[
        {
          id: 1, // MAIN ELEMENT 
          name: "Parent",
          value: `Parent`,
        },
        {
          id: 2, //CHILD OF THE MAIN ELEMENT
          name: "Child",
          value: `Child`,
          parentId: 1,
        }]}

是否有一个选项可以在打开父元素之前对其进行着色，这样就可以清楚地看出它是父元素，而其他元素是子元素？

更新：

这是codesandbox 示例。正如您所看到的，当您打开 Parent1 时，Parent2 似乎位于 Parent1 下。我想澄清的是它不在它下面。

https://codesandbox.io/s/jolly-germain-6fncr?file=/src/App.js

Answer 1

我们先来说说这个问题。这既不是程序问题，也不是 CSS 问题。这只是如何显示数据的问题，换句话说，只是用户体验的问题。

有多种方法可以实现，这是我的工作示例：https://codesandbox.io/s/withered-dust-hb882 ?file=/src/App.js

基本上我只是为父级添加第一列，仅此而已。