Estilo de lienzo innecesario

está pensado para almacenar estilos de lienzo, estilos que no afectan al resultado de HMTL/CSS, estilos que no se exportarán, ¿verdad?

Correcto

por defecto el cuerpo tiene fondo blanco, este parece ser el color predeterminado en todos los navegadores, ¿no?

Sí, pero el cuerpo del 'iframe' no tiene color de fondo por defecto, por eso ese estilo está ahí, así que tendrás que pensar en algo para tu caso de uso.

Existe la opción canvasCss para eso.

La próxima vez abre una Discusión, por favor, ya que esto no es un error principal sino un uso incorrecto.

Hola, @artf. Gracias por la respuesta. No estoy seguro de que nos entendiéramos y me gustaría aclarar un detalle. Sí, conozco la propiedad canvasCss, además, la uso para cambiar los estilos del componente seleccionado. Entiendo la esencia de la propiedad: está pensada para almacenar estilos de lienzo, estilos que no afectan al resultado de hmtl/css, estilos que no se exportarán, ¿verdad? Entonces, ¿por qué los estilos de lienzo por defecto tienen esta regla CSS ''body { background-color: white; }``` ? ¿Y por qué tiene sentido que la anulemos? Entiendo el caso en el que se selecciona el elemento cuerpo, en cuyo caso tiene sentido aplicar algunos estilos al cuerpo para la interactividad. Pero, ¿por qué especificar ''body {color-background: white; }"'' Por defecto, ¿no afecta a la interactividad del editor? Además, por defecto el cuerpo tiene un fondo blanco, este parece ser el color predeterminado en todos los navegadores, ¿no? Este comportamiento es algo inesperado que requiere que aplique '!important' a mi estilo exportado para poder anular los estilos de canvasCss.

Gracias por informar de esto, @ctrhub.

Buena pregunta sobre Innecesario estilo Canvas. El enfoque recomendado con StyleManager es usar la API orientada a eventos.

Empieza aquí:

1. Consulta la documentación de GrapesJS de tu módulo específico
2. Busca el método del oyente de eventos 'on()'
3. La mayoría de las operaciones se pueden realizar escuchando eventos del editor y de los componentes

Patrones comunes: '''javascript Prestad atención a los cambios editor.on('Change', () => console.log('Something Changed'));

Ciclo de vida de los componentes editor.on('component:mount', (c) => console.log('component ready', c)); editor.on('component:update', (c) => console.log('component updated', c));

**Si sigues atascado:**
- Compartir una reproducción mínima de CodeSandbox
- Incluye lo que ya has probado
- Menciona tu versión GrapesJS
- ¡La comunidad está aquí para ayudar!