DetailsList - Office UI Fabric - How to highlight a row on a button click of the row?

Question

I am using DetailsList of Office UI Frabric: https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist

I have a button on each row which opens a div. I want to highlight the row for which the div is opened.

I tired the solution below but it doesnt work in React : How to conditionally change a color of a row in detailslist?

Answer 1

I found the solution to this:

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

Call this method as below:

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