reactjs - DetailsList - Office UI Fabric - 如何在单击该行的按钮时突出显示该行？

Question

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

我在每一行都有一个按钮，可以打开一个 div。我想突出显示打开 div 的行。

我厌倦了下面的解决方案，但它在 React 中不起作用： 如何有条件地更改详细列表中一行的颜色？

标签： reactjsoffice-ui-fabric

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}
        />