Cambiar las propiedades de CSS en un componente con una clase existente modifica esa clase en lugar de añadir una nueva

Question

Puedes ver esto en acción en la demo (http://grapesjs.com/demo.html). Selecciona uno de los elementos de navegación (por ejemplo, 'Web'); ten en cuenta que ya existe una clase de 'elemento de menú'. Si ahora cambias algunas propiedades, como la alineación del texto, se aplican esos cambios a la clase de elemento del menú, que afecta a las otras instancias ('Plantilla', 'Constructor').

¿Es posible forzar a GrapesJS a aplicar una nueva clase 'única' y aplicar los cambios allí, similar a cómo funciona si haces cambios en un componente sin clases existentes (por ejemplo, 'c1234')?

En última instancia, quiero que cualquier cambio de estilo solo se aplique al objeto seleccionado, nunca a otras instancias del mismo tipo.

Gracias

thecodefish · Accepted Answer

Pensaba que el comportamiento podría ser algo así:

Configuración por defecto (configuración actual):

Si el elemento no tiene clases, crear una clase única basada en cid y aplicar estilos
Si el elemento tiene clases, aplicar estilos a la unión de esas clases (o a las clases seleccionadas en la interfaz)

Comportamiento alternado

Probar si un elemento tiene una clase existente basada en el cid; si no existe, crear uno
Aplicar siempre estilos personalizados solo a la clase cid

artf · Answer

Hola @thecodefish ¿qué opinas de este enfoque? https://codepen.io/artf/pen/jaaKvq

Allí verás cómo hacer que los selectores sean privados (no estilizables por el usuario) y el uso de la nueva opción 'avoidInlineStyle', que permite estilizar componentes (no selectores de clase) sin perder la respuesta ni el uso de estados (por ejemplo: hover).

artf · Answer

Diría que tienes dos opciones:Simplemente desactiva la clase, en este caso, el ámbito del gestor de estilos cambiará al componente y no a la reglaAñade una nueva clase al componente, en lugar de la regla '.menu-item' obtendrás '.menu-item.tu-nuevo-clase'

Cambiar las propiedades de CSS en un componente con una clase existente modifica esa clase en lugar de añadir una nueva

Pregunta

Respuestas (3)

Preguntas y respuestas relacionadas

Las propiedades de estilo predeterminadas no se vuelven a seleccionar al deslizar dispositivos

Pregunta sobre los nombres de clase CSS usados en la demo

¿Redimensionar los bloques con ratón?

Editar la propiedad CSS establece un estilo a una clase común en lugar de elemento

Plugins de pago que cumplen con este problema

Explorar categorías de plugins