Mantine JsonTree v3.2 — style the search bar without !important
Mantine JsonTree is an interactive JSON viewer for React with syntax highlighting, collapsible nodes, search, copy-to-clipboard, and rich type support (Date, RegExp, Map, Set, BigInt, Symbol, React elements, and more).
In v3.2 the built-in search bar (withSearch) becomes fully styleable through a new prop, searchInputProps, that forwards any prop to the internal Mantine TextInput.
What this fixes: in Mantine v9, hashed class selectors have higher specificity than a consumer's classNames rule, so styling the search input used to require !important and :global() workarounds. The new prop side-steps the whole problem.
Highlights:
• searchInputProps lets you use Mantine's native styling APIs on the search input — classNames, styles, vars, variant, radius, size, leftSection, rightSection, and more.
• Typed as Omit<TextInputProps, 'value' | 'defaultValue' | 'onChange'>. Search state stays owned by JsonTree — keep using searchQuery and onSearchChange for controlled behavior.
• Consumer-provided className and style are merged with the Styles API searchInput selector, not overwritten.
• Drop-in upgrade. Existing code keeps working unchanged.
Install: npm install @gfazioli/mantine-json-tree@3
Replies