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?
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}
/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.