造型Vuetify选择器 [英] Styling Vuetify selectors
问题描述
选择器的Vuetify组件是：
The Vuetify component for a selector is:
<v-select
:items="items"
label="Standard"
></v-select>
但是当选择器处于活动状态时，会出现许多嵌套组件（在检查时），例如，下拉列表菜单本身， 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.
我尝试使用inspect给定的类.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?
推荐答案
它似乎不起作用
it appears it doesn't work
如果你再次检查它，你会发现它确实有效，但它似乎被某些东西覆盖：
.menu__content {
top：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中是否有可用于实现样式更改的组件属性（如果可用，这可能是最佳解决方案）
- 使用您自己的脚本手动更改内联样式属性
- 更改另一个属性的样式，这将产生相同的预期结果
- see if there is a variable in vuetify config with regards to your css property somewhere which you can change (this would probably apply to all components of the same type tho)
- see if there is a component property in vuetify API which you can use to achieve style change (this would probably be the best solution if available)
- change inline-style property manually with your own script
- change style for another property which would yield the same desired outcome
注意：
如果您使用CSS解决方案，并且似乎没有应用样式，详细了解深度选择器。
这篇关于造型Vuetify选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
