what happened? What picture is this?

[YuZongYangHi]

[YuZongYangHi]

[YuZongYangHi]

import JsonView from 'react18-json-view'
import 'react18-json-view/src/style.css'

<JsonView collapseStringsAfterLength={100000} 
    src={jsonData} 
    collapsed={false}  
    theme="default" />

[YuZongYangHi]

The style of your project will be lost. My project is umijs4 + antd pro.

[YuZongYangHi]

@YYsuni

[YuZongYangHi]

The first time I used it, it was really terrible...

[YYsuni]

Hmmm... Let me see....🧐

[YYsuni]

Don't worry, could you show a demo code? Like CodeSandbox or an online website. @YuZongYangHi

[YuZongYangHi]

 <div>
    <ProTable
      cardBordered
      size={'small'}
      options={false}
      rowKey={"id"}
      search={false}
      pagination={{
        defaultPageSize: 5,
        showSizeChanger: true,
      }}
      bordered={false}
      columns={columns}
      scroll={{ x: 600 }}
      dataSource={data}/>
      <Drawer
        open={show}
        onClose={onClose}
        title={"change event"}
        size={'large'}
      >
        <div>
          <ProDescriptions
            column={1}
            title={"event detail"}
          >
            <ProDescriptions.Item
              label="ID"
            >
              {currentRow.ID}
            </ProDescriptions.Item>
            <ProDescriptions.Item
              label="title"
            >
              {currentRow.title}
            </ProDescriptions.Item>
            <ProDescriptions.Item
              label="type"
            >
              {currentRow.type}
            </ProDescriptions.Item>
            <ProDescriptions.Item
              label="url"
            >
              {currentRow.url}
            </ProDescriptions.Item>
            <ProDescriptions.Item
              label="severity"
            >
              {currentRow.severity}
            </ProDescriptions.Item>
            <ProDescriptions.Item
              label="@timestamp"
            >
              {currentRow["@timestamp"]}
            </ProDescriptions.Item>
            <ProDescriptions.Item
              label="ksn"
            >
              {currentRow.ksn}
            </ProDescriptions.Item>
            <ProDescriptions.Item
              label="username"
            >
              {currentRow.username}
            </ProDescriptions.Item>
            <ProDescriptions.Item
              label="message"
            >
              { show ? < JsonView src={jsonData}/> : <></>}
            </ProDescriptions.Item>
          </ProDescriptions>
        </div>
      </Drawer>
    </div>

[YuZongYangHi]

@YYsuni I solved it with react-json-view, but I don’t know why the style is missing in your project. The expanded and collapsed icons are abnormally large.

[YYsuni]

ok, I will continue to further research.

[YYsuni]

I created a new umi+antd pro, then I import our json-view, it works fine.....

[YuZongYangHi]

There is a high probability that it is a problem with my json

[felixSchl]

I am running into the same problem. Have you solved this?

[7inug1]

@felixSchl add the style imports to the top and it was gone for me

// this part below
import 'react18-json-view/src/style.css'
// If dark mode is needed, import `dark.css`.
// import 'react18-json-view/src/dark.css'

[felixSchl]

Thanks, that worked. I misread the docs as replacing the styles import for dark styles as opposed to adding another import.

On Mon, 8 Jan 2024, 14:30 Jinwook Shin, @.***> wrote:

@felixSchl https://github.com/felixSchl add the style imports to the top and it was gone for me

— Reply to this email directly, view it on GitHub https://github.com/YYsuni/react18-json-view/issues/20#issuecomment-1880274545, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAUT7TUAJWGMM7Q6ULH3ZXDYNND4NAVCNFSM6AAAAAA56UZQQWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQOBQGI3TINJUGU . You are receiving this because you were mentioned.Message ID: @.***>

[freds-dev]

I am having the same problem within my Remix app. None of the fixes here helped solving it. Any other ideas?

import JsonView from 'react18-json-view'
import 'react18-json-view/src/style.css'

const jsonObject = {
  string: "string",
  number: 123456,
  boolean: false,
  null: null,
  func: "function(){}",
  Symbol: "Symbol(JSON View)",
  obj: { k1: 123, k2: "123", k3: false },
  arr: ["string", 123456, false, null],
};

export default function MqttOptions() {
  return <JsonView src={jsonObject} />;
}

[YYsuni]

I am having the same problem within my Remix app. None of the fixes here helped solving it. Any other ideas?

@freds-dev The latest canary version may resolve the problem, please use v0.2.8-canary.6 by npm i react18-json-view@canary.