How to get rid of hover color in TreeTable Widget (styled components)?

Hey,

in our project we´re using a TreeTable and the flatCompactTheme.

export function PrintModelBrowserTable(props: CompProps) {
(...)
return (
		<TreeTable
			root={root}
			columns={columns}
			hideRoot
			rowEventHandlers={rowEventHandlers}
			rowStyling={rowStyling}
			componentRenderers={componentRenderers}
		/>
	);
}

For example the TreeTable component is rendered in an ActionContentbox:

return (
		<>
			<ActionContentbox
				headingElements={<ContentBoxElements.Title text="Datenarten Übersicht" />}
				subActionBar={renderSearchSubActionBar()}
				padding={0}
			>
				{dataHolder?.loadingState === "loaded" && (
					<PrintModelBrowserTable
						columns={treeTableColumns}
						expandedNodes={expandedNodes}
						setExpandedNodes={setExpandedNodes}
						tree={filteredTree}
						updateNode={handleUpdateNode}
					/>
				)}
			</ActionContentbox>
			{renderWizard(activeWizard, setActiveWizardRef)}
		</>
	);
}

How can we get rid of the grey hover color and also the color when a node is expanded without using classnames or data-attributes? The goal should be a transparent background-color.


?

In the theming configuration of treeTable I couldn´t find any trigger point (Widgets Showcase)!?

Is there a maybe trigger point in the theme? So I could change it locally with custom theme and ThemeProvider?

I´ve already tried to change our theme globally under colors.interaction.hover to see if something changes, but it didn´t work?

Do you have any suggestions? Thanks in advance :wink:

Hi @michael-thin-timber , Because Tree Table inherits all style configuration of Table Widget. We suggest you to try to use nonInteractive.hoverBG and nonInteractive.focusBG inside Table style configuration.
Screen Shot 2023-04-10 at 10.09.21

Hey @giang-brave-core thanks for your help! This is exactly what I´ve been looking for :wink:

Do you know where I can find such information? In the showcase (Widgets Showcase) there´s no hint that TreeTable inherits all styles from Table or I might didn´t see it!? And where can I find more information or examples of the theming configuration of each widget? For example what is the role of each key or what does it actually change?

Thanks again and best regards,

Michi

Hi @michael-thin-timber , It maybe our mistake when not mentioning about style configuration inheritance from Table to Tree Table. Let us update the description for this. About the role of each key, I believe we choosed the most meaningful name for every each of variable, so feel free to ask us if you have any concern. :grinning: