El Style Manager no interpreta correctamente los selectores descendientes
Sí, eso no está soportado porque podría haber implicaciones de rendimiento al intentar igualar cualquier posible regla ahí. Lo que sí puedes hacer es seleccionar cualquier regla a través de styleManager.select
Lee la respuesta completa abajo ↓Pregunta
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Versión de Chrome 131.0.6778.205 Enlace de demo reproducible https://codesandbox.io/p/sandbox/naughty-microservice-5hp3h4 Describe el bicho Cómo reproducir el error:Añadir la clase 'estilo oscuro' al cuerpo: '''js editor.getWrapper().addClass("estilo oscuro");Añadir una regla selectora de descendientes: '''js editor. CssComposer.addRules(".dark-style .test-block { margin-top: 50px; }"); ¿Cuál es el comportamiento esperado: Interpreta en el gestor de estilo como margen-máximo: 50px; ¿Cuál es el co...
Respuestas (4)
Sí, eso no está soportado porque podría haber implicaciones de rendimiento al intentar igualar cualquier posible regla ahí. Lo que sí puedes hacer es seleccionar cualquier regla a través de styleManager.select
Vale, gracias por la aclaración; actualmente uso select, ¿alguna idea de cómo dirigir las etiquetas de medios de esa manera?
Puedes obtener el CSSRule que necesitas ('getRule') y luego pasarlo a styleManager.select
El problema que has encontrado proviene de cómo el Style Manager de GrapesJS interpreta y muestra las reglas CSS, especialmente aquellas que involucran selectores complejos como los descendientes. Aunque el navegador aplica correctamente los estilos definidos por .dark-style .test-block en el lienz...
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #5746
El desplazamiento de ColorPicker incorrecto cuando los paneles están fuera del contenedor del editor
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome v122 Enlace de demo reproducible h...
Issue #4097
MousePosFetcher en el listener de reizer config & change:style no funciona
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Brave V1.34.81 Enlace de demo reproducibl...
Issue #4082
Remove some initial styles from frame canvas
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome v96 Enlace de demo reproducible Si...
Issue #6685
Los estilos de componentes personalizados no se aplican tras la eliminación y la re-suma
Versión GrapesJS [x] Confirmo que uso la última versión de GrapesJS ¿Qué navegador usas? Chrome v143.0.7499.193 Enlace de demo reproducible...
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 →Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.