样式 Vuetify 选择器 [英] Styling Vuetify selectors
问题描述
选择器的 Vuetify 组件是:
The Vuetify component for a selector is:
<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中设置样式.但是，我无法为隐藏组件执行此操作.
But when the selector is active, many nested components appear (on inspect), for example, the dropdown menu itself, menu__content. How would I go about styling it? For the "visible" Vuetify component v-select, I can manually add a class, and style it in css directly. However, I can't do this for the hidden components.
我尝试使用检查类.menu__content"进行样式设置，但它似乎不起作用:https://jsfiddle.net/agreyfield91/tgpfhn8m/936/.
I've tried to style with the inspect-given class, ".menu__content", but it appears it doesn't work: https://jsfiddle.net/agreyfield91/tgpfhn8m/936/.
如何在 css 中手动设置这些组件的样式?我缺少 vuetify 的一些基本知识吗?
How would I style these components manually in css? Is there something fundamental about vuetify I'm missing?
推荐答案
好像没用
如果你再次检查它，你会看到它确实工作"，但它似乎被某些东西覆盖了:
.menu__content {
顶部:200px;
}
If you inspect it again, you will see that it does "work", however it appears to be overridden by something:
.menu__content {
top: 200px;
}
我遗漏了一些关于 vuetify 的基本原理吗?
Is there something fundamental about vuetify I'm missing?
显然不是在这种情况下，您只是缺少 CSS 特异性.
Apparently not in this case, you are only missing CSS Specificity.
如果您检查该元素，您会注意到它有一些内联样式，大概是由某些 JavaScript 添加的，您无法立即更改.
来自上面的链接:
If you inspect the element you will notice that it has some inline-style presumably added by some JavaScript that you can't change at hand.
From link above:
内联样式添加到元素(例如，style="font-weight:bold")总是覆盖外部样式表中的任何样式，因此可以被认为具有最高的特异性.
Inline styles added to an element (e.g., style="font-weight:bold") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
解决方案
Afaik 在外部样式表中覆盖内联样式的唯一方法是使用 !important，但这似乎不是最佳实践:
Solution(s)
Afaik the only way to override inline-style in external-stylesheet is by using !important, however it seems to not be the best practice:
.menu__content {
top: 200px !important;
}
所以也许你可以做的另一件事是:
So perhaps another things you could do are:
- 查看 vuetify 配置中是否有关于您的 css 属性的变量可以更改(这可能适用于相同类型的所有组件)
- 查看 vuetify API 中是否有可用于实现样式更改的组件属性(如果可用，这可能是最佳解决方案)
- 使用您自己的脚本手动更改内联样式属性
- 更改另一个属性的样式，以产生相同的预期结果
注意:
如果您使用 CSS 解决方案，并且样式似乎未应用，请查看有关深度选择器的更多信息.
这篇关于样式 Vuetify 选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
