Should custom panel styles be overridden by defaults?

[nicholaskillin]

We recently made a change to our app that caused the right side of the devtools panel to be covered by another element. My plan was to just pass in a custom width via a style object supplied to panelProps. I was a little surprised to discover that my width was not being applied.

After some digging it looks like when panelStyle is passed into the getSidePanelStyle function those styles get immediately overwritten by any of the defaults defined after those styles are spread.

query/packages/react-query-devtools/src/utils.ts

Lines 226 to 242 in 1c21717

	export function getSidePanelStyle({
	position = 'bottom',
	height,
	width,
	devtoolsTheme,
	isOpen,
	isResizing,
	panelStyle,
	}: SidePanelStyleOptions): React.CSSProperties {
	const oppositeSide = getOppositeSide(position)
	const borderSide = getSidedProp('border', oppositeSide)
	const isVertical = isVerticalSide(position)
	return {
	...panelStyle,
	direction: 'ltr',
	position: 'fixed',

I guess my question is, is that intentional? It seem to me that the common practice when providing flexibility like this is to assume that custom supplied styles will override the defaults.

Happy to open a PR if the general consensus is that styles provided via panelProps should override all defaults.

[TkDodo]

sounds like a bug. do you want to fix it?

[nicholaskillin]

So I did some digging just now in the beta code and it is a little less clear to me if this is still an issue. It seems that the panelProps prop for ReactQueryDevtools was removed. Is there no way to customize the style in V5, or was the method for tweaking it changed in a way that I haven't discovered yet?

[TkDodo]

@ardeora maybe ?

[ardeora]

Yes, I want to provide a way to allow devtools to allow custom styles. Will adding a custom class to each devtools element help?

For example the devtools panel can have a className like TQDevtools-Panel. The query rows can have a custom class like TQDevtools-QueryRow and so on...

We can have all the elements to have a prefixed class name starting with TQDevtools- so that users can target any element they would like to customize.

[nicholaskillin]

Yeah, that would work just fine for our situation.

@TkDodo Do you still want me to open a PR to fix this in V4 or are we no longer concerned with updating that version since 5 is in beta?

[TkDodo]

I'd prefer to only merge things for v5 now please.