设置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：200像素；
}

  

关于我丢失的vuetify是否存在一些基本要求？

显然不是在这种情况下，您只想念CSS Specificity。

如果您检查元素，您会发现该元素有一些内联样式，可能是您无法更改的某些JavaScript添加的。
通过上面的链接：

  

内嵌样式已添加到元素（例如，style =“ font-weight：bold”）   总是覆盖外部样式表中的所有样式，因此可以   被认为具有最高的特异性。

解决方案

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

.menu__content {
    top: 200px !important;
}

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

• 查看vuetify config中是否有变量可以更改您的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文档（菜单属性）中：

将道具传递到v菜单组件。接受布尔型道具menu-props =“ auto，overflowY”的字符串，或对象：menu-props =“ {auto：true，overflowY：true}”

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

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