相关疑难解决方法(0)

案例1
我们正在尝试将自定义样式应用于渲染的vuetify元素:

<template>
    <v-text-field v-model="name" label="Name" />
</template>

<style scoped>
.input-group__input {
    background: red;
}
</style>

但没有变化.

<template>
    <div v-html="customHTML"></div>
</template>

<script>
export default {
    data: () => ({
        customHTML: `<img src="https://vuetifyjs.com/static/doc-images/carousel/planet.jpg">`;
    })
}
</script>

<style scoped>
img {
    width: 200px;
    height: 200px;
}
</style>

如何将自定义CSS应用于这些元素？

选择器的Vuetify组件是:

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

但是当选择器处于活动状态时,会出现许多嵌套组件(在检查时),例如,下拉菜单本身,menu__content.我该怎么做造型呢？对于"可见"Vuetify组件v-select,我可以手动添加一个类,并直接在css中设置它.但是,我无法为隐藏的组件执行此操作.

我试着用检查给定的类".menu__content"来设置样式,但它似乎不起作用:https://jsfiddle.net/agreyfield91/tgpfhn8m/936/ .

我如何在css中手动设置这些组件的样式？我错过了什么关于vuetify的根本性的东西？