样式化 Vuetify 选择器

Posted 2023-02-22

【中文标题】样式化 Vuetify 选择器

【英文标题】：Styling Vuetify selectors

【发布时间】：2019-01-13 23:34:14

【问题描述】：

选择器的 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 的一些基本知识吗？

【问题讨论】：

<div class="menu__content"> 定义了style="top:xx"，可能你想像this fiddle 一样使用margin-top: 100px; 或使用vm.$el 来更改style.top 的值

它仍然没有做任何事情，不是吗？我无法获得任何样式来与 css 中的 .menu__content 有所不同。

我遇到了一个奇怪的交互 - 在 jsFiddle 中，将 css 中的 .menu__content 更改为 div.menu__content 会使样式按照您的小提琴工作。但对于我的完整应用程序，它仍然没有任何改变。这和 SCSS 有关系吗？

相关：***.com/questions/50985783/…

对不起，我忘了跟进！您提供的解决方案适用于我提供的 jsfiddle，但我意识到由于 vuetify 设置，我在本地机器上处理了一个完全不同的问题，因此您的解决方案不适用（这是我的问题）。我会将你的标记为其他用户接受。

【参考方案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。

【参考方案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 组件的开头（除非提供了附加属性），并且不能被直接在组件上传递的类作为目标。

【讨论】：

请解释您的解决方案。