Issues with styles

[Ananthumpillai]

am creating a plugin.
`domc.addType("Testing", {
isComponent(el) {
if (
(el.getAttribute && el.getAttribute("data-gjs-type") == "Testing") ||
(el.attributes && el.attributes["data-gjs-type"] == "Testing")
) {
return {
type: "Testing",
};
}
},

model: {
  defaults: {
    tagName: "div",
    draggable: true,
    droppable: false,
    resizable: false,
    copyable: false,
    stylable: false,

    attributes: {
      "data-gjs-type": "Testing",
    },
  },
},

});

editor.BlockManager.add("Testing", {
label: "Testing",
category: "Custom",
attributes: { class: "fa fa-picture-o" },
content: <div data-gjs-type={"Testing"}>{TestingComp()},
});`

and my component is `

      <div>
        <span class="badge">Studio</span>
        <span class="badge">1 Bath</span>
      </div>
    </div>

    <div>
      <img
        src="data:image/png"
        alt="Apartment Layout"
        class="apartment-image"
      />
    </div>
    <div class="details">
      <div>
        <strong>From:</strong> $2,195
      </div>
      <div>
        <strong>Sq. Ft.:</strong> 544
      </div>
      <div>
        <strong>Available:</strong> 08.23.2024
      </div>
    </div>

    <div class="buttons">
      <button class="primaryButton">View Details</button>
      <button class="secondaryButton">Apply</button>
      <label>
        {" "}
        <input type="checkbox" /> Compare{" "}
      </label>
    </div>
  </div>

  <style>{styles}</style>
</div>`





Issue is when i drag and drop a component and change the style of a class, that style is getting added not overwriting the existing class styles.