![](/img/trans.png)
[英]How to toggle office-ui-fabric detailslist row selection using the entire row as a toggle instead of just using the small tiny checkbox
[英]DetailsList - Office UI Fabric - How to highlight a row on a button click of the row?
我正在使用 Office UI Frabric 的详细信息列表: https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist
我在每一行都有一个按钮,可以打开一个 div。 我想突出显示打开 div 的行。
我厌倦了下面的解决方案,但它在 React 中不起作用: 如何有条件地更改详细列表中一行的颜色?
我找到了解决方案:
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}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.