feat: expose class json-viewer-theme-* for style customization

Author: pionxzh

package.json

@@ -64,6 +64,7 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@mui/material": "^5.11.13",
+    "clsx": "^1.2.1",
     "copy-to-clipboard": "^3.3.3",
     "zustand": "^4.3.6"
   },

src/index.tsx

@@ -2,6 +2,7 @@ import {
   createTheme, Paper,
   ThemeProvider
 } from '@mui/material'
+import clsx from 'clsx'
 import type { FC, ReactElement } from 'react'
 import { useCallback, useContext, useEffect, useMemo, useRef } from 'react'
 
@@ -74,6 +75,10 @@ const JsonViewerInner: FC<JsonViewerProps> = (props) => {
       })
     }
   }, [setState, props.theme])
+  const themeCls = useMemo(() => {
+    if (typeof props.theme === 'object') return 'json-viewer-theme-custom'
+    return props.theme === 'dark' ? 'json-viewer-theme-dark' : 'json-viewer-theme-light'
+  }, [props.theme])
   const onceRef = useRef(true)
   const predefinedTypes = useMemo(() => predefined(), [])
   const registerTypes = useTypeRegistryStore(store => store.registerTypes)
@@ -97,7 +102,7 @@ const JsonViewerInner: FC<JsonViewerProps> = (props) => {
   return (
     <Paper
       elevation={0}
-      className={props.className}
+      className={clsx(themeCls, props.className)}
       style={props.style}
       sx={{
         fontFamily: 'monospace',

yarn.lock

@@ -1715,6 +1715,7 @@ __metadata:
     "@vitejs/plugin-react": ^3.1.0
     "@vitest/coverage-c8": ^0.29.3
     "@vitest/ui": ^0.29.3
+    clsx: ^1.2.1
     copy-to-clipboard: ^3.3.3
     eslint: ^8.36.0
     eslint-config-standard: ^17.0.0