Таблица материалов: изменение цвета действия c при изменении щелчка / состояния

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" }
        };
      }
    ]}

Here is the песочница .

Надеюсь, это то, чем вы были ищите, если нет, я считаю, что примеры в официальной docs функции Selection могут помочь вам с таким поведением.

удачи!