Issue Integrating GrapeJS with Vue3 + Vite Project

Question

I'm encountering a problem trying to integrate GrapeJS into a Vue3 + Vite project.

Here's my component where I initialize the editor:

<template>
  <div class="wrapper-editor">
    <div id="gjs" ref="editor"></div>
  </div>
</template>

<script>
import grapesjs from "grapesjs";
import "grapesjs/dist/css/grapes.min.css";
import pluginNewsLetter from "grapesjs-preset-newsletter";

export default {
  name: "GrapeEditor",
  props: {},
  mounted() {
    this.initGrapeJS();
  },
  data() {
    return {
      editor: {},
    };
  },
  methods: {
    initGrapeJS() {
      this.editor = grapesjs.init({
        container: this.$refs.editor,
        plugins: [pluginNewsLetter],
        pluginsOpts: {
          pluginNewsLetter: {},
        },
        fromElement: false,
        height: "600px",
        storageManager: false,
      });
      //custom blocks
      this.addCustomBlocks();
    },
    addCustomBlocks() {
      const editor = this.editor;
      
      editor.BlockManager.add('my-first-block', {
        label: 'Simple block',
        content: '<div class="my-block">This is a simple block</div>',
      });
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
#gjs {
  border: 3px solid #444;
  width: 60%;
}

.wrapper-editor {
  width: 80%;
  margin: 0 auto;
  padding: 24px;
}

.my-block {
  padding: 10px;
  background-color: #f7f7f7;
  border: 1px solid #dcdcdc;
  margin-bottom: 5px;
}
</style>

It seems to initialize correctly, but within the editor, the block options and the canvas do not display correctly (blocks not appearing and canvas all black):

not working editor

I've tested the same code in a personal Vue3 project with vue cli I use for testing, and with the identical code, it works perfectly and displays as it should: working editor

Dependencies from package.json (same vue and grapejs version on both projects):

  "dependencies": {
    "axios": "^1.6.5",
    "grapesjs": "0.21.9",
    "grapesjs-blocks-basic": "^1.0.2",
    "grapesjs-mjml": "^1.0.5",
    "grapesjs-preset-newsletter": "^1.0.2",
    "grapesjs-preset-webpage": "^1.0.3",
    "pinia": "^2.1.7",
    "vue": "3.3.2",
    "vue-i18n": "^9.9.0",
    "vue-router": "^4.2.0",
    "vue-spinner": "^1.0.4",
    "vuetify": "^3.5.4"
  },

Does anyone have any insights into what might be happening?

EDIT: So, it appears that it was a problem related to global styles applied that in some way were causing a conflict with GrapesJS. Changing some rules or deleting them solved the problem.