Los estilos de componentes personalizados no se aplican tras la eliminación y la re-suma

Me estoy enfrentando a un problema similar, donde el componente reañadido tiene la propiedad de estilos correctos:

Pero si uso el botón "Ver código", el CSS no se inyectó, en mi caso ni siquiera están en el DOM. El componente en sí funciona, porque cuando se añadió por primera vez, los estilos estaban realmente inyectados y funcionaban bien. Solo después de quitarlo y volver a añadirlo falla.

También he probado usando la función "component.replaceWith(newComponent)" en lugar de "component.remove()" y "editor.addComponents(newComponent)".

Ejemplo de código: '''s Definición de componentes domComponents.addType('my-type', { modelo: { Predeterminados: { etiquetaNombre: 'div', nombre: 'My Type', atributos: { 'data-gjs-type': 'my-type' }, } } });

Añadir componente (aquí los estilos funcionan) editorInstance.Components.addComponent({ Tipo: 'Mi-Tipo', atributos: { id: 'mi-id' }, componentes: //varios componentes de texto e imagen, Styles: '#my-id #ir2o {\n relleno: 5px;\n izquierda: 94px;\n Arriba: 120px;\n posición: absoluta;\n}\n\n ....' }, { at: 0 });

Recuperación del componente en otra operación sea myComponent = editorInstance.Components.getComponents().find((component: Component) => component.getType() === 'mi-tipo');

Reemplazarlo (o quitarlo y volver a añadir) por uno actualizado myComponent.replaceWith({ Tipo: 'Mi-Tipo', atributos: { id: 'mi-id' }, componentes: //Actualizados varios componentes de texto e imagen, estilos: '#my-id #ir2o {\n relleno: 5px;\n izquierda: 94px;\n arriba: 140px;\n posición: absoluta;\n}\n\n ....' //Estilos actualizados });

Los componentes se añaden con éxito, pero los estilos actualizados no se inyectan.

@mdmontesinos tu uso no es correcto, los 'estilos' deben definirse en la definición de componentes, y no se espera que cambien. Además, es incorrecto usar IDs para la definición de componentes si se espera que el componente se reutilice, el ID se recreará, dependerá de clases, especialmente para estilos.

Pero el informe de @shery parece legítimo; Puede que haya un problema con el almacenamiento en caché de estilos.

@artf estoy usando un ID porque siempre habrá una instancia única de ese componente en mi proyecto. Mi caso de uso es que un componente está diseñado externamente para usarse como "fondo de fondo" y luego importado a proyectos que lo utilizan. Por lo tanto, cuando se actualiza el componente externo, también necesito actualizarlo en mi proyecto, por eso intento recrearlo, y puede que sus componentes o estilos hayan sido modificados. ¿Hay alguna forma de forzar que los estilos se actualicen a los estilos?

Gracias por informar de esto, @shery.

Buena pregunta sobre Los estilos de componentes personalizados no se aplican tras eliminarlos y volver a añadir. 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!