Cómo añadir !important en todas las APIs generadas
Puede que haya encontrado una solución para tu problema. Por favor, comprueba https://github.com/artf/grapesjs/issues/1041#issuecomment-382545102
Lee la respuesta completa abajo ↓Pregunta
Hola @artf,
Aunque voy a editar algo de html desde el editor con la ayuda de CSS, necesito añadir '!important' a todo el CSS, que ha cambiado.
Déjame darte un ejemplo, Esto es CSS anterior
.banner-title {
Color de fondo: #e6d8d8;
frontera: 3px #acbe5a #b83dd3;
color: #f80000;
}
Ahora voy a cambiar el color de esta fuente por '#000'. Entonces solo este CSS modificado tendría que añadirse con '!important'. Así que el nuevo CSS se obtendrá mientras voy a buscar usando 'editor.getCss()' será como,
.banner-title {
Color de fondo: #e6d8d8;
frontera: 3px #acbe5a #b83dd3;
color: #f000 ¡importante;
}
¿Puedo lograr este objetivo?
Respuestas (3)
Puede que haya encontrado una solución para tu problema. Por favor, comprueba https://github.com/artf/grapesjs/issues/1041#issuecomment-382545102
No creo que necesites añadir !important porque tu elemento con la clase .banner-title recibe una clase única añadida que contiene la propiedad que ha cambiado.
Así que si cambias el color, se añade una nueva clase con color: #your-color y así el color definido en .banner-title se sobrescribe.
@NicoEngler , Gracias por tu valiosa respuesta. Pero el problema es que estoy cargando una página de plantilla predeterminada con CSS por defecto. En este CSS tenemos CSS como
.banner-title {
Color de fondo: #e6d8d8;
frontera: 3px #acbe5a #b83dd3;
color: #f80000 !importante;
}
Ahora, cuando cambio el color a '#000' usando el editor, se crea el nuevo CSS como,
.banner-title {
color: #000;
}
Pero la cuestión es que los CSS por defecto ya tienen '!important', así que tomará el CSS de la plantilla predeterminada, no el nuevo.
Por eso estoy añadiendo '!important' a los nuevos CSS generados por el editor.
Decidme si no has entendido mi punto, puedo entenderlo con más detalles.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #843
[PREGUNTA] - CssComposer - elimina clases no utilizadas
Hola @artf, Importo un html, usando import de grapesjs-preset-newsletter, con algunas clases CSS dentro de la <style>etiqueta ''. Después d...
Issue #1888
[Pregunta] Añadir html personalizado dentro de Canvas
Hola, Estoy usando uvas para exportar un json personalizado con toda la información que necesito, en lugar de HTML y CSS. Para hacer eso, e...
Issue #1623
Mismo diseño para todos los bloques
Hola @artf, esto en realidad no es un error, pero me gustaría preguntar Si existe algo como el diseño global para cada bloque. por ejemplo,...
Issue #1150
[Pregunta] Obtén subidas como Base64
Hola a todos, Necesito ayuda para integrar esto en una aplicación web que tengo. Todo se renderiza y funciona como se espera, pero estoy in...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.