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

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,
        }]}

是否有一个选项可以在打开父元素之前对其进行着色，所以很明显它是 PARENT 而其他是 CHILD？

更新：

这是代码框示例。正如您在打开 Parent1 时所看到的，Parent2 似乎在 Parent1 之下。我想明确表示它不在它之下。

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

Answer 1

让我们先谈谈这个问题。这既不是程序问题也不是 css 问题。这只是如何显示数据的问题，换句话说，只是 UX。

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

基本上我只是为父级添加一个第一列，就是这样。

Answer 2

好的，使用 CSS 选择器实现 onExapnd 颜色更改并不容易。在这里，您必须为父 TR 检查和子按钮旋转（90 度）检查编写检查。要在没有 onClick 检查的情况下更改颜色，您可以使用以下 CSS：

tr[level="0"] {
  background-color: #FF0000;
}

tr[level="1"] {
  background-color: #FF0033;
}

tr[level="2"] {
  background-color: #FF0066;
}

在 JS 方式中，您可以使用以下代码（当然，您必须将其添加到每个表中或扩展表或使用带有现成 rowStyle 方法的 util lib..）

import React from "react";
import MaterialTable from "material-table";
import SearchIcon from "@material-ui/icons/Search";
import RotateLeftIcon from "@material-ui/icons/RotateLeft";
import { ArrowUpward, ChevronRight } from "@material-ui/icons";

//import './styles.css';

export default () => {
  const constPathColors = {
    1: '#FFFF00',
    2: '#FFFF33',
    3: '#FFFF66',
    4: '#FFFF99',
    5: '#FFFFCC'
  };
  return (
    <MaterialTable
      style={{ width: "100%", margin: "3%" }}
      title="Income Statement"
      icons={{
        Filter: React.forwardRef((props, ref) => <SearchIcon ref={ref} />),
        Search: React.forwardRef((props, ref) => <SearchIcon ref={ref} />),
        ResetSearch: React.forwardRef((props, ref) => (
          <RotateLeftIcon ref={ref} />
        )),
        SortArrow: ArrowUpward,
        DetailPanel: ChevronRight
      }}
      columns={[
        {
          field: "name",
          title: "Category"
        },
        {
          field: "value",
          title: "Value",

          cellStyle: {
            textAlign: "center"
          }
        }
      ]}
      data={[
        {
          id: 1, // MAIN ELEMENT
          name: "Parent 1",
          value: `SomeParentValue`
        },
        {
          id: 2, //CHILD OF THE MAIN ELEMENT
          name: "Child 1-1",
          value: `Child Value`,
          parentId: 1
        },
        {
          id: 3, //CHILD OF THE MAIN ELEMENT
          name: "Child 1-2",
          value: `Child Value`,
          parentId: 1
        },
        {
          id: 4, //CHILD OF THE CHILD ELEMENT
          name: "Child 1-2-1",
          value: `Child Value`,
          parentId: 3
        },
        {
          id: 5, // MAIN ELEMENT
          name: "Parent 2",
          value: `SomeParentValue`
        }
      ]}
      parentChildData={(row, rows) => rows.find(a => a.id === row.parentId)}
      options={{
        paging: false,
        headerStyle: {
          backgroundColor: "#378FC3",
          color: "#FFF",
          fontSize: "17px",
          textAlign: "center",
          fontWeight: "bold"
        },
        rowStyle: rowData => {
          if(rowData.tableData.isTreeExpanded === false && rowData.tableData.path.length === 1) {
            return {};
          }
          const rowBackgroundColor = constPathColors[rowData.tableData.path.length];
          return {backgroundColor: rowBackgroundColor};
        }
      }}
    />
  );
};

该行在展开前具有默认颜色：

展开后它有黄色（渐变取决于级别）背景颜色：

Answer 3

这就是我的树视图的样子。感谢left: `var(--left-before, ${0}px)，我可以将 :befores 定位在我想要的任何位置

https://i.ibb.co/Wp9XJcc/childscapture.png

viewTableTree.styles.js

import { makeStyles } from '@material-ui/core/styles';

export const useViewTableTreeStyles = makeStyles(theme => ({
  root: {
    '& .MuiPaper-root': {
      boxShadow: 'none'
    },
    '& .MuiTable-root': {
      position: 'relative',
      overflow: 'hidden'
    },
    '& .MuiTableRow-root': {
      '&:hover': { backgroundColor: 'rgba(0, 0, 0, 0.04)' },
      '&:before': {
        content: '""',
        fontWeight: theme.font.weight.black,
        fontSize: theme.font.size.xxl,
        position: 'absolute',
        left: `var(--left-before, ${0}px)`,  //important trick here!
        width: '1px',
        height: '3.2rem',
        backgroundColor: theme.palette.basic.bright
      }
    }
  }
}));

然后在 MaterialTable 组件中

ViewTableTree.js

  <div className={classes.root}>
      <MaterialTable
        icons={tableIcons}
        data={rows}
        columns={cells}
        localization={{
          header: {
            actions: ''
          }
        }}
        options={{
          selection: false,
          paging: false,
          search: false,
          showTitle: false,
          toolbar: false,
          actionsColumnIndex: -1,
          rowStyle: rowData => {
            let styles = { transition: 'transform 300ms' };
            const levels = rowData.tableData.path.length === 1 ? 0 : rowData.tableData.path.length;
            styles = { ...styles, '--left-before': `${levels * 6}px` };

            return rowData.tableData.isTreeExpanded
              ? {
                  ...styles,
                  fontWeight: 600,
                  backgroundColor: 'rgba(77, 93, 241, 0.08)'
                }
              : styles;
          }
        }}
        {...props}
      />
    </div>