设置Vuetify选择器的样式

  • Z时代
  • 2024-01-10
  • 分类：问答

选择器的Vuetify组件是：

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

但是，当选择器处于活动状态时，会出现许多嵌套组件（在检查时），例如，下拉菜单本身menu__content。我将如何设计样式？对于“可见”的Vuetify组件v-

select，我可以手动添加一个类，然后直接在CSS中设置其样式。但是，我无法对隐藏的组件执行此操作。

我尝试使用“.menu__content”检查类进行样式设置，但它似乎不起作用。

如何在CSS中手动设置这些组件的样式？关于Vuetify我是否缺少一些基本知识？

回答：

似乎不起作用

如果再次检查它，您将看到它“起作用”，但是它似乎被某些东西覆盖：

.menu__content {

top：200px;

}

关于Vuetify我是否缺少一些基本知识？

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

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

从上面的链接：

（例如，style =“ font-weight：bold”）

，因此可以认为具有最高的特异性。

回答：

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

.menu__content {
    top: 200px !important;
}

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

  • 看看vuetify config中是否有关于您的CSS属性可以更改的变量（这可能适用于相同类型的所有组件）

  • 查看vuetify API中是否有一个组件属性，您可以使用该属性来实现样式更改（如果可能，这可能是最好的解决方案）

  • 使用自己的脚本手动更改内联样式属性

  • 更改将产生相同预期结果的另一个属性的样式

。

以上是 设置Vuetify选择器的样式 的全部内容， 来源链接： utcz.com/qa/436330.html

回到顶部