'remove fluent UI details List hover color issue
I am using fluent ui detailsList.
I have two columns one have no header name. but its have row data. If I hover my mouse its highlighted. I need to remove that header highlight color. If someone have an idea please suggest me.
{
key: "title",
name: "Title",
fieldName: "title",
minWidth: 150,
maxWidth: 350,
isRowHeader: true,
isResizable: true,
isSorted: false,
isSortedDescending: false,
onColumnClick: _onColumnClick,
data: "string",
isPadded: true,
},
{
key: "moreOptions",
ariaLabel: "TypeButtonColumn",
minWidth: 70,
maxWidth: 90,
onRender: (item) => {
return (
<IconButton
disabled={_setDisabled(item)}
menuProps={menuProps(item)}
menuIconProps={{ iconName: "More" }}
/>
);
},
},
<div id="searchGrid" style={gridStyle}>
<MarqueeSelection>
<DetailsList
items={tableItems}
compact={false}
columns={tableColumns}
selectionMode={SelectionMode.multiple}
getKey={getKey}
layoutMode={DetailsListLayoutMode.justified}
isHeaderVisible={true}
selection={selection}
selectionPreservedOnEmptyClick={true}
enterModalSelectionOnTouch={true}
ariaLabelForSelectionColumn="Toggle selection"
ariaLabelForSelectAllCheckbox="Toggle selection for all items"
checkButtonAriaLabel="select row"
visibility="false"
/>
</MarqueeSelection>
</div>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

