quasarframework
scss v-bind variables not working inside q-dialog SFC
What happened?
Hi, i'm trying to use v-bind css variables for SFC. While this feature works on normal components it won't work while using q-dialogs.
What did you expect to happen?
The dialog should have a red background.
Reproduction URL
https://codesandbox.io/s/laughing-agnesi-ctskso?file=/src/components/MyDialog.vue
How to reproduce?
Here it is the same component using <script setup> feature:
<template>
<q-dialog ref="dialogRef" :model-value="modelValue" @update:model-value="$emit('update:model-value', $event)">
<q-card class="container-card reactive-backgroud-color">
<q-card-section class="text-h6"> This dialog should have a red background </q-card-section>
<q-separator />
<q-card-section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed turpis lectus, condimentum in eros quis, congue condimentum eros. In maximus ex
arcu, laoreet suscipit lectus eleifend sit amet. Donec metus purus, porta eu iaculis sed, ullamcorper quis risus. Pellentesque facilisis felis
eget ornare suscipit. Nulla felis lorem, euismod eu lacinia vitae, condimentum vitae leo. Aliquam tincidunt gravida urna a pharetra. Etiam mi
ex, aliquet placerat purus nec, dictum tristique sem. Maecenas a mi quis enim lacinia porta. Sed eget velit vel est hendrerit tristique
bibendum vitae nunc. Maecenas a velit ut nisl volutpat efficitur ut quis dolor. Maecenas vel justo malesuada, tempus neque vel, ornare ex.
Fusce felis est, volutpat ut vehicula vitae, imperdiet ut libero. Nunc ex massa, cursus in suscipit a, finibus quis nisl. Sed vel gravida
massa, et consequat urna. Duis orci ligula, maximus ac tristique venenatis, venenatis in diam.
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn label="close" v-close-popup />
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
defineEmits({
"update:model-value": (payload: boolean) => payload === true || payload === false,
});
defineProps({
modelValue: {
type: Boolean,
required: true,
},
});
const theme = {
color: "red",
};
</script>
<style lang="scss" scoped>
.reactive-backgroud-color {
background-color: v-bind("theme.color");
}
</style>
Then change it's model to true and you will see that the bakground color isn't set.
Then if you try to remove the q-dialog tags and v-model related logic and import it as plain component the background is actually red.
Flavour
Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)
Areas
Components (quasar), Style & Identity (quasar)
Platforms/Browsers
Chrome
Quasar info output
No response
Relevant log output
No response
Additional context
If you go to the developer console inside the browser you will see this:
background-color: var(--ba9b6fa2-tmp);
And hovering it this message will show up: --ba9b6fa2-tmp is not defined
WORK AROUND:
Abstract that reactive portion of code that needs to use the css variable into a different component and import it. Not the best but works for now. (see linked repo)
