DetailsList - Office UI Fabric - 如何在單擊該行的按鈕時突出顯示該行？

Question

我正在使用 Office UI Frabric 的詳細信息列表： https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist

我在每一行都有一個按鈕，可以打開一個 div。 我想突出顯示打開 div 的行。

我厭倦了下面的解決方案，但它在 React 中不起作用： 如何有條件地更改詳細列表中一行的顏色？

Answer 1

我找到了解決方案：

const onRenderColumnListRow: IDetailsListProps['onRenderRow'] = (props) => {
        const customStyles: Partial<IDetailsRowStyles> = {};
        if (props) {
            customStyles.root = { backgroundColor: '#f2f8ff', color: '#171717' };
            return <DetailsRow {...props} styles={customStyles} />;
        }
        return null;
 };

調用此方法如下：

  <DetailsList
          items={displayedItems}
          columns={detailsListColumns}
          selectionMode={SelectionMode.none}
          getKey={getKey}
          layoutMode={DetailsListLayoutMode.justified}
          styles={styles}
          onRenderRow={onRenderRowStyle}
        />