Por el momento necesito tener 3 componentes de tarjeta, todos con tres colores diferentes. Los colores se aplican al pseudo-elemento :before (y muchas otras áreas) y, por lo tanto, creo que la solución más fácil sería aplicar esto con una variable/propiedad CSS.
Por el momento, creo una nueva propiedad/variable CSS en el mounted() de mi componente, y esto funciona bien con 1 tarjeta, pero se rompe con múltiples. Cuando tengo varios componentes, solo el primero obtiene el color y el segundo ni siquiera obtiene el color. Parece sobrescribir el color anterior con el primer componente y luego ignora el segundo por completo (no se muestra ninguna propiedad de color en las herramientas de desarrollo en el segundo).
Mi pregunta es, ¿cuál sería la mejor solución a este problema? ¿Hay alguna manera de agregar fácilmente una variable CSS con ámbito que no anule las otras variables? ¿O sería el mejor curso de acción agregar todos estos estilos en JavaScript?
componente virtual
<template> <div :class="'card ' + clss"> <div class="card-top"> <h3>{{ title }}</h3> </div> <div class="card-center"> <p>{{ message }}</p> </div> <div class="card-bottom"> <a href="" class="btn-p card-btn">Learn more</a> </div> </div> </template> <script> export default { name: "Card", props: ['clss', 'color', 'title', 'message'], data() { return { } }, mounted() { var style = document.querySelector('.card').style; style.setProperty(`--color`, this.color); }, } </script> <style lang="scss" scoped> // Example, not all styles are shown .card:before { content: ""; position: absolute; z-index: -1; top: -16px; right: -16px; background: var(--color); // Example of where I need this color } </style>Vue con todos los componentes
<template> <div class="grid grid-cols-12"> <!-- Green --> <Card title="Lorem1" message="Lorem" color="#00838d" clss="col-span-4" > </Card> <!-- Purple --> <Card title="Lorem2" message="--bg-color" color="#0066b2" clss="col-span-4" > </Card> </div> </template>Tienes que usar this.$refs aquí en lugar de document.querySelector('.card') . El document.querySelector('.card') está tomando el primer elemento de la página. Usando referencias, está eligiendo una referencia al elemento DOM dentro de su elemento de tarjeta. Agregue el atributo ref a su div en la plantilla y reemplace document.querySelector('.card') con referencia a su div usando this.$refs .
Referencia: https://v3.vuejs.org/guide/component-template-refs.html
CSS están en cascada , la variable debe aplicarse a una jerarquía de elementos. Es una mala señal que se acceda directamente a DOM en el componente Vue. document.querySelector consulta todos los elementos, independientemente de la instancia del componente al que pertenezcan, y también accede solo a uno que puede no estar relacionado con la instancia del componente actual.
Si es necesario acceder a los elementos DOM en un componente, esto se hace comúnmente a través de referencias:
<div :class="'card ' + clss" ref="card">y
mounted() { this.$refs.card.style.setProperty(`--color`, this.color); },Las variables CSS (propiedades personalizadas) se necesitan principalmente para proporcionar un valor para los estilos anidados. Esto no es necesario si se especifica un estilo en el mismo componente:
<div :class="'card ' + clss" :style="{ background: color }">