造型Vuetify选择器

Question

选择器的Vuetify组件是:

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

但是当选择器处于活动状态时,会出现许多嵌套组件(在检查时),例如,下拉菜单本身,menu__content.我该怎么做造型呢？对于"可见"Vuetify组件v-select,我可以手动添加一个类,并直接在css中设置它.但是,我无法为隐藏的组件执行此操作.

我试着用检查给定的类".menu__content"来设置样式,但它似乎不起作用:https://jsfiddle.net/agreyfield91/tgpfhn8m/936/ .

我如何在css中手动设置这些组件的样式？我错过了什么关于vuetify的根本性的东西？

Answer 1

看来它不起作用

如果您再次检查它，您会发现它确实“有效”，但它似乎被某些内容覆盖：
.menu__content {
     top: 200px;
}

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

显然在这种情况下不是，你只是缺少CSS Specificity。

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

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

解决方案

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

.menu__content {
    top: 200px !important;
}

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

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

注意：
如果您使用 CSS 解决方案，并且样式似乎未应用，请参阅有关深度选择器的更多信息。