Unnecessary Canvas style

it is intended to store canvas styles, styles that do not affect the result of hmtl/css, styles that will not be exported, right?

Correct

by default the body has a white background, this seems to be the default color in all browsers, no?

yeah but the iframe body doesn't have any default background color that's why that style is there, so you'll need to figure it something for your use case.

There is canvasCss option for that.

Next time open a Discussion please, as this is not a core bug but wrong usage.

Hey @artf. Thanks for the answer. I'm not sure that we understood each other and I would like to clarify one detail. Yes, I know about the canvasCss property, moreover, I use it to change the styles of the selected component. I understand the essence of the property: it is intended to store canvas styles, styles that do not affect the result of hmtl/css, styles that will not be exported, right? Then why do the default canvas styles have this CSS rule body { background-color: white; } ? And why it makes sense us to override it? I understand the case where the body element is selected, in which case it makes sense to apply some styles to the body for interactivity. But why specify body {background-color: white; } by default, it doesn’t affect the interactivity of the editor? Moreover, by default the body has a white background, this seems to be the default color in all browsers, no? This is kind of unexpected behavior that requires me to apply !important to my exported style so that I can override the styles from canvasCss.

Thanks for reporting this, @ctrhub.

Great question about Unnecessary Canvas style. The recommended approach with StyleManager is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!