How to customize style?

[statico]

Hi there, this module is great. However, I'm not sure how to customize the style when using it with Next.js. The included CSS file has compiled class names. This is the approach we have to use, which will clearly break if the module gets updated.

          <style jsx global>{`
            ._2IvMF {
              background-color: transparent;
            }
            ._GzYRV {
              font-size: 11px;
              font-family: Menlo, monospace;
              line-height: 14px;
            }
            ._2bkNM {
              margin: 0 15px;
            }
            ._f10Tu {
              margin-left: -15px;
            }
          `}</style>

[AnyRoad]

Hi!

You can use the style property to customize the styles.

Seems like you use the styled-jsx. I think you can do something like:

import { JsonView, defaultStyles } from 'react-json-view-lite';

const customStyles = { ...defaultStyles };
customStyles.booleanValue = 'my-boolean-style';

<div>
<JsonView styles={customStyles}  /* ...other-properties */ >
<style jsx global>{`
  .my-boolean-style {
    color: red;
    font-size: 18px;
  }
`}</style>
</div>

I haven't used styled-jsx but seems like you can even avoid global with the resolve tag from styled-jsx/css

If you use css-modules you can do like this:

import styles from './styles.module.css'
import { JsonView, defaultStyles } from 'react-json-view-lite';

const customStyles = { ...defaultStyles };
customStyles.booleanValue = styles.myBooleanStyle;

Or you can create completely custom style by constructing StyleProps object from scratch with the style names you need.

You can refer to the README for the styles you can override.

[statico]

OK, thanks! It's still kinda difficult to theme since I have a few things to tweak. It would be great if I could copy and paste some kind of default theme but with un-uglified CSS class names.

Thanks for your help and keep up the good work.