Material-Table：在点击/状态改变时改变特定动作的颜色

Question

如何根据不同的状态设置特定 MT 操作的样式？

目前我正在做这样的事情：

 actions={[
              rowData => {
                const active = rowData && selected && rowData.tableData.id === selected.tableData.id;
                return {
                  icon: 'bug_report',
                  iconProps: { color: active ? 'secondary' : 'primary' },
                  onClick: (event, info) => {
                    setSelected(info);
                  },
                };
              },
]}

但是，它没有为单个选定元素着色，而是保持 primary 并且什么都不做。为什么？是因为动作是为动作行呈现的，而下一行 !== 被选中了吗？

Answer 1

所以根据我的理解，我遵循了你的代码并得到了这个：

actions={[
      rowData => {
        let active =
          rowData &&
          clickedRow &&
          rowData.tableData.id === clickedRow.tableData.id;
        return {
          icon: "bug_report",
          tooltip: "Report bug",
          onClick: (event, rowData) => setClicked(rowData),
          iconProps: { color: active ? "primary" : "secondary" }
        };
      }
    ]}

这里是 sandbox.

我希望这就是您要找的，如果不是，我相信官方 docs 中有关选择功能的示例可能会帮助您解决此类问题。

祝你好运！

Material-Table：在点击/状态改变时改变特定动作的颜色

Material-Table: Change a specific action's colour on click / state change

reactjs

material-table