feat: support passing sx props to customize the style

TexteaInc · Mar 21, 2023 · e10fe1d · e10fe1d
1 parent c5e1753
commit e10fe1d
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 4 deletions.
diff --git a/docs/components/JsonViewerPreview.tsx b/docs/components/JsonViewerPreview.tsx
@@ -9,7 +9,7 @@ export const JsonViewerPreview: FC<JsonViewerProps> = (props) => {
   return (
     <JsonViewer
       theme={currentTheme}
-      style={{
+      sx={{
         fontSize: 12
       }}
       value={props.value}

diff --git a/docs/pages/full/index.tsx b/docs/pages/full/index.tsx
@@ -277,8 +277,8 @@ const IndexPage: FC = () => {
             }, []
           )
         }
-        style={{
-          paddingLeft: 16
+        sx={{
+          paddingLeft: 2
         }}
       />
     </div>

diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx
@@ -87,6 +87,7 @@ Check the [source code](https://github.com/TexteaInc/json-viewer/blob/main/docs/
 | `theme`                      | `"light"` <br />\| `"dark"` <br />\| `"auto"` <br />\| [Base16](https://github.com/chriskempson/base16) | `"light"` | Color theme.                                                                                                                                                                         |
 | `className`                  | `string`                                                                                                | -         | Custom class name.                                                                                                                                                                   |
 | `style`                      | `CSSProperties`                                                                                         | -         | Custom style.                                                                                                                                                                        |
+| `sx`                         | `SxProps`                                                                                               | -         | [The `sx` prop](https://mui.com/system/getting-started/the-sx-prop/) lets you style elements inline, using values from the theme.                                                    |
 | `indentWidth`                | `number`                                                                                                | 3         | Indent width for nested objects                                                                                                                                                      |
 | `keyRenderer`                | `{when: (props) => boolean}`                                                                            | -         | Customize a key, if `keyRenderer.when` returns `true`.                                                                                                                               |
 | `valueTypes`                 | `ValueTypes`                                                                                            | -         | Customize value types.                                                                                                                                                               |

diff --git a/src/index.tsx b/src/index.tsx
@@ -102,7 +102,8 @@ const JsonViewerInner: FC<JsonViewerProps> = (props) => {
       sx={{
         fontFamily: 'monospace',
         userSelect: 'none',
-        contentVisibility: 'auto'
+        contentVisibility: 'auto',
+        ...props.sx
       }}
       onMouseLeave={onMouseLeave}
     >

diff --git a/src/type.ts b/src/type.ts
@@ -1,3 +1,4 @@
+import type { SxProps, Theme } from '@mui/material/styles'
 import type { ComponentType, CSSProperties, Dispatch, FC, SetStateAction } from 'react'
 
 import type { Colorspace } from './theme/base16'
@@ -154,6 +155,7 @@ export type JsonViewerProps<T = unknown> = {
 
   className?: string
   style?: CSSProperties
+  sx?: SxProps<Theme>
   /**
    *
    * @default 'light'