Material-Table：在点击/状态更改时更改特定操作的颜色答案

【问题标题】：Material-Table: Change a specific action's colour on click / state changeMaterial-Table：在点击/状态更改时更改特定操作的颜色
【发布时间】：2020-07-10 15:11:07
【问题描述】：

如何根据不同的状态设置特定 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 并且什么都不做。为什么？是不是因为动作是为动作行渲染的，下一行!==被选中了？

【问题讨论】：

你能解释一下或者显示一下，选择来自哪里？您是否在选项中使用选择功能？另外，“基于不同的状态”是什么意思？谢谢
当然。 Selected is part 只是该实现组件中的一个状态，并保存 rowData。基本上，如果选中（rowData）等于具有相同 rowData 的那一行，它应该做一些事情。就像将图标设为蓝色而不是黑色，以表明这是“活动的”。那有意义吗？还有哪个选择功能，这个我还没遇到过。

标签： reactjs material-table

【解决方案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 上的选择功能示例可能会帮助您解决这种行为。

祝你好运！

【讨论】：