BUG: gjs-selected Style is Hardcoded

Hi @anlumo you're right, unfortunately, component status styles are rendered inside iframes. I've tried to put them outside by introducing this option but that doesn't handle multiple selections yet. So, at the moment, the only way to handle them properly is to use this option:

grapesjs.init({
  // ...
  canvasCss: `
        .gjs-selected {
          outline: 3px solid red !important;
        }
   `,
})

Hi @mingxin-yang i belive that you have to follow the same rule that @artf said. But using the corresponding classes

grapesjs.init({
  // ...
  canvasCss: `
    .gjs-tools .gjs-badge { /* for the label */
      background-color: red;
    }
    .gjs-toolbar { /* for the toolbar */
      background-color: red;
    }
  `,
})

Posted Free plugin for set colors

Borders: https://gjs.market/products/borders-color-around-selected-component