Customize the appearance

You can customize the appearance by the following ways.

Style

You can customize the style by passing style, className and sx props.


<JsonViewer style={{ backgroundColor: 'red' }} className="custom-class" sx={{ backgroundColor: 'red' }} />

Theme

Pass theme prop to JsonViewer component. The default value is light.

Options

Available values are light, dark and auto. If you pass auto, the theme will be changed automatically according to the system theme.


<JsonViewer
  theme={theme} // 'light', 'dark' or 'auto'
/>

Sets of classes are binded to the component root to reflect the current theme. You can also use this to customize the appearance.

json-viewer-theme-light
json-viewer-theme-dark
json-viewer-theme-custom when a theme object being passed

Base 16 Theme

You can also pass Base 16 theme object to fine-tune the appearance.

theme/ocean.ts


import type { NamedColorspace } from '@dataxpdtn/mui-json-viewer'
 
export const ocean: NamedColorspace = {
  scheme: 'Ocean',
  author: 'Chris Kempson (http://chriskempson.com)',
  base00: '#2b303b',
  base01: '#343d46',
  base02: '#4f5b66',
  base03: '#65737e',
  base04: '#a7adba',
  base05: '#c0c5ce',
  base06: '#dfe1e8',
  base07: '#eff1f5',
  base08: '#bf616a',
  base09: '#d08770',
  base0A: '#ebcb8b',
  base0B: '#a3be8c',
  base0C: '#96b5b4',
  base0D: '#8fa1b3',
  base0E: '#b48ead',
  base0F: '#ab7967'
}
 
<JsonViewer
    theme={ocean}
/>

The good old css way

Different part of the dom structure will have class names like data-object-start, json-type-label, json-function-start and so on. You can use these class names to customize the detailed appearance.

This is the list of class names. 🧐

data-key
data-key-pair
data-key-key
data-key-colon
data-key-toggle-expanded
data-key-toggle-collapsed
data-type-label
data-object
data-object-start
data-object-body
data-object-end
data-function
data-function-start
data-function-body
data-function-end
data-value-fallback


.json-viewer .data-object-start {
  color: red;
}