Vue 中如何修改 vue-json-editor 样式

要修改 'vue-json-editor' 的样式，可以通过以下几种方式：

使用全局样式：在 main.js 文件中引入样式文件，并在 Vue 实例的配置中设置全局样式。

import 'vue-json-editor/dist/vue-json-editor.css'
import VueJsonEditor from 'vue-json-editor'

Vue.use(VueJsonEditor, {
  theme: 'custom-theme' // 自定义的样式类名
})

使用局部样式：在组件中引入样式文件，并在模板中使用对应的类名。

<template>
  <div>
    <vue-json-editor class='custom-theme' :schema='schema' :model='model' @update='updateJson'></vue-json-editor>
  </div>
</template>

<script>
import 'vue-json-editor/dist/vue-json-editor.css'

export default {
  data() {
    return {
      schema: {},
      model: {}
    }
  },
  methods: {
    updateJson(json) {
      // 更新 JSON 数据
    }
  }
}
</script>

<style scoped>
.custom-theme {
  /* 自定义样式 */
}
</style>

修改源码样式：直接修改 'vue-json-editor' 组件的源码样式，但这种方式不推荐，因为每次更新组件时都需要重新修改。

根据实际需求，选择合适的方式来修改 'vue-json-editor' 的样式。