将 CSS 应用于 Quasar 元素的作用域组件答案

【问题标题】：Applying CSS to scoped component of Quasar element将 CSS 应用于 Quasar 元素的作用域组件
【发布时间】：2022-08-24 20:09:25
【问题描述】：

我正在开发一个 quasar/vue 应用程序。我想在一个组件中设置对话框弹出窗口的样式。我正在使用作用域 CSS，如果 CSS 没有作用域，则样式有效。如果 CSS 是作用域的，则 CSS 不起作用。我只想在这个组件中设置这个对话框的样式。

调用对话框的模板代码：

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

CSS 元素是：

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

</style>

这不起作用：

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

我注意到全局类星体样式标有 !important

密码笔：https://codepen.io/kiggs1881/pen/oNoOzEj

您是否尝试在<q-select class=\"bg-red-10\" ... /> 之类的组件上使用类，并且您还有一个属性color。这也有帮助：github.com/quasarframework/quasar/issues/4636
谢谢你的建议！您指定的类为实际的 q-select 字段设置样式，但不是弹出值对话框（这是我想要设置的样式）。该链接也没有解决对话，但感谢您指出 - 请密切注意！
您还可以在标签<q-select> <template></template> </q-select> ref 中使用<template>。 quasar.dev/vue-components/select#customizing-menu-options
检查这个答案：stackoverflow.com/a/63324478/6126100
非常感谢。我不想删除范围，因为我只想设置这个对话框弹出窗口的样式。如何仅将样式应用于该 .q-select__dialog？ q-select 上的 ID 不起作用

标签： css quasar-framework

【解决方案1】：

  .q-dialog__inner > div  {

  width: 400px !important;
  background-color: red !important;

}

希望能帮助到你

【讨论】：

【解决方案2】：

我认为 quasar.dev 文档中提供了所有内容，如果这无助于尝试在悬停时使用 => funtion-To-Display-Popover-In-Specific-Component 有很多方法可以解决这个问题，使用 scoped 不是唯一的

【讨论】：

谢谢，穆萨。如果我能在开发文档中找到它，我就不会发布了。