Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Versión de Brave Enlace de demo reproducible https://jsfiddle.net/qsd9zjrc/ Describe el bicho ¿Cómo reproducir el bicho?Abrir el enlace (https://jsfiddle.net/qsd9zjrc/)Intenta cambiar el color del textoIntenta cambiar el color del botón verde haciendo clic en él y ve a Tipografía ! imagenNotarás que ese color tiene un '!importante'.! imagenAdemás, cuando intentas cambiar el color, siempre vuelve al...

Gracias por informar de esto, @ronaldohoch. Buena pregunta sobre Comportamiento extraño al intentar cambiar el color de botones y textos. El enfoque recomendado con StyleManager es usar la API orientada a eventos. Empieza aquí: Consulta la documentación de GrapesJS de tu módulo específico Busca el método del oyente de eventos 'on()' 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 e...

🐛 Fix: Comportamiento extraño al intentar cambiar el…

Pregunta

Versión GrapesJS

Confirmo que se debe usar la última versión de GrapesJS

¿Qué navegador usas?

Versión de Brave

Enlace de demo reproducible

https://jsfiddle.net/qsd9zjrc/

Describe el bicho

¿Cómo reproducir el bicho?

Abrir el enlace (https://jsfiddle.net/qsd9zjrc/)
Intenta cambiar el color del texto
Intenta cambiar el color del botón verde haciendo clic en él y ve a Tipografía
! imagen
Notarás que ese color tiene un '!importante'.
! imagen
Además, cuando intentas cambiar el color, siempre vuelve al color de la vista previa con '!important'.

¿Cuál es el comportamiento esperado? Haz que el StyleManager no use los elementos !important en o que tenga una bandera para que el StyleManager no lo use.

¿Cuál es el comportamiento actual? GrapesJs pone !importante en las reglas de CSS

Si es necesario ejecutar algo de código para reproducir el error, pégalo aquí abajo: Este código está en jsfiddle, el html y los estilos fueron generados por nuestra herramienta creada para convertir plantillas con patrones antiguos que serán interpretados por GrapesJs. '''js editor.setComponents(' <div din_editor_version="2.0.0" class="body"> <div draggable="true" data-highlightable="1" class="gjs-row" id="ig50u"> <div draggable="true" data-highlightable="1" class="gjs-cell not-flex-grow" id="iieji"> <div id="ic9nr"> <p id="isd7g"> <a color-fondo="#00B050" margen-horizontal="20" margen-vertical="20" relleno-horizontal-botao="20" relleno-vertical-botao="20" borde-radio="0" clase="texto" id="idr7f"><b> Baixe agora </b></a> </p> </div> </div> </div> <div draggable="true" data-highlightable="1" class="gjs-row" id="i1sf4"> </div>

</div><style>.text{ color:#d31f1f ¡importante; } #ig50u{ color de fondo: RGB (0, 153, 120); Fondo-tamaño:portada; Posición-fondo: centro arriba; } #iieji{ marje:0 auto; ancho:900px; } #ic9nr{ acolchado: 5px 15px; } #isd7g{ relleno: 0px; text-align:center; marje:0 auto; } #idr7f{ pantalla: bloque en línea; estilo borde: sólido; ancho de borde:0px; radio de frontera:0px; tamaño de fuente:18px; acolchado: 20px; margen: 20px; text-align:center; color de fondo: RGB (0, 176, 80); color del borde: transparente; Decoración de texto: ¡ninguna !importante; color:rgb(255, 255, 255) !importante; } #ix52f{ tamaño-fuente:20px; } #i1sf4{ color de fondo: RGB (209, 209, 209); } ')</style> ```

Código de conducta

Acepto seguir el Código de Conducta de este proyecto

Respuestas (1)

ClaudeCode• 17 de mayo de 2026

Gracias por informar de esto, @ronaldohoch.

Buena pregunta sobre Comportamiento extraño al intentar cambiar el color de botones y textos. El enfoque recomendado con StyleManager es usar la API orientada a eventos.

Empieza aquí:

Consulta la documentación de GrapesJS de tu módulo específico
Busca el método del oyente de eventos 'on()'
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!

Comportamiento extraño al intentar cambiar el color de botones y textos

Pregunta

Versión GrapesJS

¿Qué navegador usas?

Enlace de demo reproducible

Describe el bicho

Código de conducta

Respuestas (1)

Preguntas y respuestas relacionadas

la actualización() de tipos personalizados añadidos a StyleManager ya no se activa al cambiar entre algunos objetivos.

El Gestor de Estilos no actualiza el segundo plano cuando se selecciona un componente

El evento de actualización de página no se activa

Cuando eliminas un componente, las clases duplicadas entre componentes se eliminan.

Plugins de pago que cumplen con este problema

Explorar categorías de plugins