样式化 Vuetify 选择器

Question

选择器的 Vuetify 组件是：

<v-select
:items="items"
label="Standard"
></v-select>

But when the selector is active, many nested components appear (on inspect), for example, the dropdown menu itself, menu__content.我将如何设计它？对于“可见”的 Vuetify 组件 v-select，我可以手动添加一个类，并直接在 css 中对其进行样式设置。但是，我不能对隐藏的组件执行此操作。

我尝试使用检查给定的类“.menu__content”来设置样式，但它似乎不起作用：https://jsfiddle.net/agreyfield91/tgpfhn8m/936/。

如何在 css 中手动设置这些组件的样式？我缺少关于 vuetify 的一些基本知识吗？

Answer 1

好像不行

如果你再次检查它，你会发现它确实“工作”了，但是它似乎被某些东西覆盖了：
.menu__content {
顶部：200px;
}

我缺少关于 vuetify 的一些基本知识吗？

显然不是这种情况，您只是缺少CSS Specificity。

如果您检查该元素，您会注意到它具有一些内联样式，可能是由某些 JavaScript 添加的，您无法立即更改。
从上面的链接：

内联样式添加到元素（例如 style="font-weight:bold"） 总是覆盖外部样式表中的任何样式，因此可以 被认为具有最高的特异性。

解决方案

Afaik 在外部样式表中覆盖内联样式的唯一方法是使用!important，但这似乎不是最佳实践：

.menu__content {
    top: 200px !important;
}

所以也许你可以做的另一件事是：

• 查看 vuetify 配置中是否存在与您的 css 属性相关的变量，您可以更改（这可能适用于所有相同类型的组件）
• 查看 vuetify API 中是否有组件属性可用于实现样式更改（如果可用，这可能是最好的解决方案）
• 使用您自己的脚本手动更改内联样式属性
• 更改另一个属性的样式，这将产生相同的预期结果

注意：
如果您使用 CSS 解决方案，但样式似乎未应用，see more about deep selectors。

Answer 2

<v-select
   :items="items"
   label="Standard"
   :menu-props="{ contentClass: 'youramazingclass'}">
</v-select>

来自 v-select 文档（菜单道具）：

将 props 传递给 v-menu 组件。接受布尔属性 menu-props="auto, overflowY" 的字符串或对象 :menu-props="{ auto: true, overflowY: true }"

来自 v-menu 文档（内容类）

将自定义类应用于分离的元素。这很有用，因为内容被移动到 v-app 组件的开头（除非提供了附加属性），并且不能被直接在组件上传递的类作为目标。