How to change the style of the outline of selected components
Only selected component style is inside the canvas, so you have to use canvasCss option https://github.com/artf/grapesjs/blob/8915ae417bed25a4834b34d8f0ecc08f0e03fd64/src/editor/config/config.js#L74-L78 for the rest, you can use simple CSS as always
Read full answer below ↓Question
Hi @artf
I can change the style of outline of a hovered component with
.gjs-cv-canvas .gjs-highlighter { ...... }
How can I change the outline style of a selected component? I cannot apply the style using '.gjs-comp-selected'
Also, how can I change the style of the component type/name label of hovered/selected components?
Thanks!
Answers (1)
Only selected component style is inside the canvas, so you have to use canvasCss option https://github.com/artf/grapesjs/blob/8915ae417bed25a4834b34d8f0ecc08f0e03fd64/src/editor/config/config.js#L74-L78
for the rest, you can use simple CSS as always
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3421
[QUESTION] How to remove class selector css rule
I'm using componentFirst set to true to let my users apply needed style to component they selected. Selecting a component which is applied...
Issue #3685
showStylesOnChange is not working
Guys, I am new to grapes, I would like on component change show the Style Manager, here is my component and how I add it, also I would like...
Issue #1113
[QUESTIONS] New trait type is not working with rendered components?
Hello, thanks for the great framework. I'm trying to apply this to my project. I want to add a new trait for existing LINK '<a>' component....
Issue #3515
gjs-selected Style is Hardcoded
This definition: https://github.com/artf/grapesjs/blob/88249c38577852dc3c42047356a70a12066ee6ca/src/canvas/view/FrameView.js#L303-L306 is a...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.