'Applying CSS to scoped component of Quasar element

I am working on a quasar/vue app. I want to style the dialog popup within one component. I'm using scoped CSS, and if the CSS is not scoped, the style works. If the CSS is scoped, the CSS does not work. I only want to style this dialog in this one component.

The template code calling the dialog:

<div class="-nav">
  <q-select
    outlined
    dense
    v-model="select"
    :options="options()"
    behavior="dialog"
    style="width: 100px"
  />

The CSS element is:

<style scoped>
 .q-dialog__inner {
    width: 400px;
    background-color: red;
  }

</style>

This does not work:

:deep(.q-dialog__inner) {
  width: 400px !important;
  background-color: red;
 }

I noticed that the global quasar style is marked with !important

codepen: https://codepen.io/kiggs1881/pen/oNoOzEj

cssquasar-framework


Solution 1:[1]

I think everything is provided in the quasar.dev documentation if that doesnt help try using on hover => funtion-To-Display-Popover-In-Specific-Component there are many ways to counter this problem using scoped is not the only one

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 MusaYasin

Related Questions