Can't set background:none in mobile version using styles panel

the clear icon from de property Background removes completely the properties from the selected device making it inherit again the values from the desktop settings.

Correct

the clear icon in the layer line resets the stack values, setting the properties for the selected device to its default values, removing the background and not inheriting from the desktop settings. Clicking again in the same clear icon will remove the layer completely.

I'm not sure if that's exactly what I have in mind but the idea is to make it work as it is but with an additional logic, when I remove the last layer, I'll apply the new property, if exists (eg. emptyValue).

That is a possible property type

emptyValue?: string | () => PropValues;

In the case of string

emptyValue: 'unset',

I'll update the style target properties with that value { background-image: unset, background-size: unset, ... }

Or I can decide to generate the style properties directly (in case of more advanced usage)

emptyValue: () => ({
 'background-image': 'unset',
 'background-size': 'other value', 
 // ...
}),

I've inserted a solution for the stack type. I'm going to make a PR but I would like to ask you something first. The behavior i'm adding is:

• the clear icon in the layer line resets the stack values, setting the properties for the selected device to its default values, removing the background and not inheriting from the desktop settings. Clicking again in the same clear icon will remove the layer completely.
• the clear icon from de property Background removes completely the properties from the selected device making it inherit again the values from the desktop settings.

This is the behavior i'm applying to our version of the grapes. If you think that this should be de standard behavior i can make the PR later What do you say?

Thanks for reporting this, @ronaldohoch.

Great question about Can't set background:none in mobile version using styles panel. 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!