Issue #986✓ ResueltoAbierto el 29 de marzo de 2018por nojackoReacciones 2

El CSS exportado no puede anular el color de fondo del cuerpo

Respuesta rápidapor artf2

Gracias James, ya lo conocemos #552 pero lamentablemente aún no hemos dado ninguna solución :/ El principal problema es que GrapesJS no maneja bien el estilismo corporal/wrapper y, como resultado, tenemos el 'cuerpo' que viene de tres puntos diferentes:desde la opción protectedCssdel estilo de componentes del envoltor...

Lee la respuesta completa abajo ↓

Pregunta

Cuando el estilo de fondo de un cuerpo está definido en la opción 'estilo' de la función de inicio, no es posible anularlo.

Dado el estilo:

cuerpo {
    color de fondo: #000000;
}

Después de cambiar el color de fondo en Grapes, la salida CSS es:

cuerpo {
    color de fondo: #f80000; /* Color seleccionado en uvas */ 
}
cuerpo {
    color de fondo: rgb(0, 0, 0); /* Color original que debe sobrescribir */
}

Debido al orden, el color original tendrá prioridad cuando se utilize.

Aunque no necesariamente es un problema, la repetición de 'cuerpo' no es necesaria y probablemente solucionaría este problema si la definición de 'cuerpo' en css se fusionara. Creo que esto también pasa con otros selectores CSS.

Pasos para reproducirse

  1. https://jsfiddle.net/jk3g2eu2/
  2. Haz clic en el envoltorio del lienzo
  3. Cambiar el color de fondo.
  4. Haz clic en el icono de código para ver CSS generado.

Respuestas (2)

👍 Muy útilartf31 de marzo de 2018

Gracias James, ya lo conocemos #552 pero lamentablemente aún no hemos dado ninguna solución :/ El principal problema es que GrapesJS no maneja bien el estilismo corporal/wrapper y, como resultado, tenemos el 'cuerpo' que viene de tres puntos diferentes:

  • desde la opción protectedCss
  • del estilo de componentes del envoltorio (que normalmente es el cuerpo y por eso lo manejo por separado)
  • y como en tu caso, también de otro CSSRule (creado por 'style: 'body{background-color:#000000;}' `) Tenemos que encontrar una forma correcta de manejar todos estos casos, pero aún no he encontrado tiempo para revisarlo, así que agradecería cualquier consejo o ayuda. Cierro esto y te sugiero que te suscribas al #552 si quieres más novedades.
lock[bot]17 de septiembre de 2019

Este hilo se ha bloqueado automáticamente porque no ha habido actividad reciente desde que se cerró. Por favor, abre un nuevo problema para bugs relacionados.

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

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.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.