Skip to content

Commit 48ec8cf

Browse files
authored
fix(devtools): Fix expand button styling (TanStack#3544)
closes TanStack#3538
1 parent fab76e6 commit 48ec8cf

File tree

1 file changed

+12
-2
lines changed

1 file changed

+12
-2
lines changed

src/devtools/Explorer.tsx

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,16 @@ export const LabelButton = styled('button', {
1919
color: 'white',
2020
})
2121

22+
export const ExpandButton = styled('button', {
23+
cursor: 'pointer',
24+
color: 'inherit',
25+
font: 'inherit',
26+
outline: 'inherit',
27+
background: 'transparent',
28+
border: 'none',
29+
padding: 0,
30+
})
31+
2232
export const Value = styled('span', (_props, theme) => ({
2333
color: theme.danger,
2434
}))
@@ -107,13 +117,13 @@ export const DefaultRenderer: Renderer = ({
107117
<Entry key={label}>
108118
{subEntryPages?.length ? (
109119
<>
110-
<button onClick={() => toggleExpanded()}>
120+
<ExpandButton onClick={() => toggleExpanded()}>
111121
<Expander expanded={expanded} /> {label}{' '}
112122
<Info>
113123
{String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : ''}
114124
{subEntries.length} {subEntries.length > 1 ? `items` : `item`}
115125
</Info>
116-
</button>
126+
</ExpandButton>
117127
{expanded ? (
118128
subEntryPages.length === 1 ? (
119129
<SubEntries>

0 commit comments

Comments
 (0)