造型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屋!